How To Make My Nav Bar Responsive To Mobile (Codepen Included)?

Question

I'm currently making my web page responsive. I'm struggling with the nav bar, and don't have an idea on where to start to make it mobile friendly. This is what my nav bar looks like:

HTML:

<head>

  <link href="https://fonts.googleapis.com/css?family=Gilda+Display|Montez|Sacramento" rel="stylesheet">

</head>


<nav>
      <div class="navcontainer">
         <ul>
            <li class="right"><a href="productPage.php">Shop</a></li>
            <li class="right"><a href="">Login</a></li>
            <li><a href="index.php"><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></a></li>
            <li class="right"><a href="contact.php">Contact us</a></li>
            <li class="right"><a href="blog/cms.php">Blog</a></li>
         </ul>
      </div>
     </nav>

     <div class="clearfix"></div>

CSS:

html, body {
  margin: auto;
  padding: 0px;
}

.container{
    margin: 0 auto;
    width: 85%;
}

.clearfix{
    clear:both;
}


/*******************************/

/*********************HEADER*******************/



nav {
  text-align: center;
  width: 100%;
  background-color: white;
  border:2px solid black;
}

nav ul {
  padding: 0;
  margin:0;
}

nav li {
  color: black;
  display: inline-block;
  font-size: 30px;
  font-weight: 300;
  font-family: 'Sacramento', cursive;
  vertical-align: middle;
  margin: 16px 20px;
}



li a{
    text-decoration: none;
    color: black;
}

.logo{
    height:100px;
}

Here is the codepen code to my nav bar:

https://codepen.io/teenicarus/pen/vZWJxX

This is how I would like it to look like on mobile:

Where do I go from here to create a similar result?

I appreciate all responses.

score 0 · Answer 1 · answered Jun 27 '17 at 11:15

You need to use @media query to override the css based on screen size... working example as below

html, body {
  margin: auto;
  padding: 0px;
}

.container{
 margin: 0 auto;
 width: 85%;
}

.clearfix{
 clear:both;
}


/*******************************/

/*********************HEADER*******************/



nav {
  text-align: center;
  width: 100%;
  background-color: white;
  border:2px solid black;
}

nav ul {
  padding: 0;
  margin:0;
}

nav li {
  color: black;
  display: inline-block;
  font-size: 30px;
  font-weight: 300;
  font-family: 'Sacramento', cursive;
  vertical-align: middle;
  margin: 16px 20px;
}



li a{
 text-decoration: none;
 color: black;
}

.logo{
 height:100px;
}
.small-screen{display:none;}
@media screen and (max-width: 768px) {
  nav li {display:block}
  .small-screen{display:block;}
   .large-screen{display:none;}
}

<head>
  
  <link href="https://fonts.googleapis.com/css?family=Gilda+Display|Montez|Sacramento" rel="stylesheet">
  
</head>


<nav>
   <div class="navcontainer">
   <ul>
       <li class="small-screen"><a href="index.php"><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></a></li>
    <li class="right"><a href="productPage.php">Shop</a></li>
    <li class="right"><a href="">Login</a></li>
      <li class="large-screen"><a href="index.php"><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></a></li>
    <li class="right"><a href="contact.php">Contact us</a></li>
    <li class="right"><a href="blog/cms.php">Blog</a></li>
   </ul>
   </div>
  </nav>

  <div class="clearfix"></div>

score 0 · Answer 2 · answered Jun 27 '17 at 11:56

For making responsive website, rather than starting from scratch use available frameworks such as Bootstrap.

Bootstrap provides a ready made collapsible navbar, that automatically collapses your navbar for mobile screens and displays a "humburger-icon" toggle drop down menu like you want. The official documentation can be found here : Bootstrap Nav-Bar.

You can also find a working example and a bit more explanation on how to implement bootstrap navigation bars, here: W3Schools Bootstrap Nav-Bar.

To actually implement it in your codepen is a bit of work, and but it is not hard. I think it would do you good to actually implement it yourself. If you have any particular issues while implementing it you can always come back to Stack Overflow. So good luck.

Here are some additional links that may be helpful :

How To Make My Nav Bar Responsive To Mobile (Codepen Included)?

2 Answers2