How can I make my navbar responsive?

Jeff Geoff Published at Dev

Jeff Geoff

I have this navbar at codepen:http://codepen.io/DogburnDesign/pen/zymID. It's nice and all but I've realized that it is not responsive. I am quite experienced in making websites but I am new to this responsive thing. Any help guys?

Thanks. here is the code:

HTML:

    <div id="bg"></div>
<section>
  <nav>
    <div></div>
    <ul>
      <li data-xcoord="0px" class="active">Home</li>
      <li data-xcoord="160px">About</li>
      <li data-xcoord="320px">Contact</li>
      <li data-xcoord="480px">Store</li>
    </ul>
  </nav>
</section>

CSS:

#bg{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top,  #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
  position:relative;
  width:640px;
  margin:50px auto;
}
nav{
  width:100%;
}
nav ul li{
  display:inline-block;
  list-style:none;
  width:160px;
  text-align:center;
  font-family:Helvetica, sans-serif;
  border: 1px dashed rgba(255,255,255, 0);
  color:#fff;
  padding:10px 0 10px 0;
  margin:-1px -5px -1px -1px;
  cursor:pointer;
  transition:all .2s;
  -webkit-transition:all .2s;
}
nav ul li:hover{
  /*border:1px dashed #fff;*/
  background:rgba(255,255,255,.1);
}
nav ul{
  border: 1px solid #fff;
  position:absolute;
  width:100%;
  padding:0;
  z-index:100;
}
nav div{
  position:absolute;
  left:0;
  top:16px;
  background: #fff;
  width:162px;
  height:40px;
  z-index:99;
}
.active{
  color:rgba(55, 186, 177, 1);
}

And last but not least, JS:

$("nav ul li").click(function(){
  var xcoord = $(this).data("xcoord");

  $("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
  $(this).addClass("active");
  $("nav ul li").not(this).removeClass("active");

});

Timo

You need to use media queries. See the working example below (You should check the full screen version and play with browser width)

If you create responsive layouts, it is easier if you think in percentages. You do not create an element that is 640px wide, but you create element that is 100% wide but max-width is 640px. So that if user's viewport is wider than 640px then element is 640px, if viewport is less than 640px wide, then the element is x% of the width. My point is that you need to think responsive, it is not a good practice to create thousands of media queries for every 10px of screen width

I also recommend you to use some responsive css frameworks, i.e Bootstrap 3

$("nav ul li").click(function(){
  var xcoord = $(this).data("xcoord");

  $("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
  $(this).addClass("active");
  $("nav ul li").not(this).removeClass("active");

});

#bg{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top,  #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
  position:relative;
  width: 100%;
  max-width:640px;
  margin:50px auto;
}
nav{
  width:100%;
}
nav ul li{
  display:inline-block;
  list-style:none;
  width:160px;
  text-align:center;
  font-family:Helvetica, sans-serif;
  border: 1px dashed rgba(255,255,255, 0);
  color:#fff;
  padding:10px 0 10px 0;
  margin:-1px -5px -1px -1px;
  cursor:pointer;
  transition:color .2s, background .2s;
  -webkit-transition:color .2s, background .2s;
}
nav ul li:not(.active):hover{
  /*border:1px dashed #fff;*/
  background:rgba(255,255,255,.1);
}
nav ul{
  border: 1px solid #fff;
  position:absolute;
  width:100%;
  padding:0;
  z-index:100;
}
.active{
  color:rgba(55, 186, 177, 1);
  background: #fff;
}

@media only screen and (max-width : 720px) {
  nav ul{
    width: 80%;
    left: 10%;
  }
  nav ul li{
    display: block;
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="bg"></div>
<section>
  <nav>
    <ul>
      <li class="active">Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Store</li>
    </ul>
  </nav>
</section>

Solution number 2 does not require media queries and keeps list elements floating. See the solution below

$("nav ul li").click(function(){
  var xcoord = $(this).data("xcoord");

  $("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
  $(this).addClass("active");
  $("nav ul li").not(this).removeClass("active");

});

#bg{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top,  #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
  position:relative;
  width: 100%;
  max-width:640px;
  margin:50px auto;
}
nav{
  width:100%;
}
nav ul li{
  display:inline-block;
  list-style:none;
  width:25%;
  text-align:center;
  font-family:Helvetica, sans-serif;
  border: 1px dashed rgba(255,255,255, 0);
  color:#fff;
  padding:10px 0 10px 0;
  margin:-1px -5px -1px -1px;
  cursor:pointer;
  transition:color .2s, background .2s;
  -webkit-transition:color .2s, background .2s;
}
nav ul li:not(.active):hover{
  /*border:1px dashed #fff;*/
  background:rgba(255,255,255,.1);
}
nav ul{
  border: 1px solid #fff;
  position:absolute;
  width:100%;
  padding:0;
  z-index:100;
}
.active{
  color:rgba(55, 186, 177, 1);
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg"></div>
<section>
  <nav>
    <ul>
      <li class="active">Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Store</li>
    </ul>
  </nav>
</section>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-25

Comments

0 comments

From Java

Related Related

Article