Responsive nav not appearing as intended

Question

I am trying to create a responsive nav bar, but I am coming across issues making it appear in the way intended.

Here is an image of how it looks when window is maximized :

Here is an image when the window is resized :

Here is an image of what I want the page to look and function like:

Issues :

• As the images show, the header currently shows the links "stretches, mobility" etc, when I want it to display "Join / Log In" etc (image 3).
• When menu is clicked, I want the nav to dynamically display the other links.

Here is what I have tried so far: https://jsfiddle.net/hudnybux/

Answer 1

Ok, I think I got it to look almost exactly like your screenshots. One of the main things I had to do was move your nav-trigger up within html.

<div id="header-main">
    <div id="nav-trigger"><span>Menu</span></div>
    <nav id="main-navigation" role="navigation">
        <ul>
            <li><a href="#">Stretches</a></li>
            <li><a href="#">Mobility</a></li>
            <li><a href="#">Posture</a></li>
        </ul>
    </nav>
    <!--<nav id="nav-mobile"></nav>-->
</div>

Technically you no longer need nav-mobile nav. I also fixed your caret triangle next to "menu". It needed a height and width of 0 .

width: 0;
height: 0;

Edit:

I have revisited my solution. Just as a suggestion, I am recommending css transitions instead of jQuery slideDown and slideUp . You were already applying a class and that is all we need to create dynamic animations. jQuery's methods apply the styles inline and frankly leave you with less flexibility.

https://jsfiddle.net/qnco3x7e/8/

Answer 2

You will need to add another media query

@media all and (max-width: 460px) {
  nav#main-navigation li {
    display:block;
    border-bottom: 1px solid #fafafa;
  }
}

Answer 3

Writing others' code for them is not in the spirit of Stack Overflow, but, as I prefer teaching by showing and not telling, I went ahead and did the task for you. Observe how I changed your implementation and learn as much as you can!

The Strategy

• Use the same HTML markup for the main menu (Stretches, Mobility, Posture) on both large and small screen widths, instead of using JavaScript to duplicate it in two places.
• Use the same CSS for both menus as a starting point; in the media query for small screen sizes, change the main menu to be horizontal
• Show everything by default; use display: none only on screen sizes you don't want to show something on.

JSFiddle

 $(document).ready(function() { $("#main-nav-mobile-trigger span").click(function() { $(this).toggleClass("open"); if ($(this).hasClass("open")) { $("#main-nav").addClass("open").slideDown(250); } else { $("#main-nav").removeClass("open").slideUp(250); } }); });

 .pageOverlay { width: 900px; margin: 0 auto; } /******************/ nav { background-color: #fefefe; /*NAV COLOUR*/ padding: 10px 0; border-bottom: 1px solid #e3e3e3; text-align: center; } nav ul li a { color: #a4a4a5; text-decoration: none; } nav ul li a:hover { color: black; } nav ul { display: inline-block; list-style-type: none; margin: 0; padding: 0; text-align: center; } nav li { display: inline-block; padding: 0 2px; } nav li:last-child { border-right: none; } nav a { display: block; color: white; padding: 10px 20px; } /****************************************************************/ /* Menu CSS which pops up when window is resized */ #main-nav-mobile-trigger { text-align: center; } #main-nav-mobile-trigger span { display: inline-block; padding: 10px 30px; cursor: pointer; text-transform: uppercase; } #main-nav-mobile-trigger span:after { display: inline-block; margin-left: 10px; width: 20px; height: 10px; content: ""; border-left: solid 10px transparent; border-top: solid 10px #e3e3e3; border-right: solid 10px transparent; } #main-nav-mobile-trigger span:hover { background-color: #e3e3e3; } #main-nav-mobile-trigger span.open:after { border-left: solid 10px transparent; border-top: none; border-bottom: solid 10px #fff; border-right: solid 10px transparent; } @media all and (min-width: 901px) { #top-nav { text-align: right; } #main-nav { text-align: left; } #main-nav-mobile-trigger { display: none; } } @media all and (max-width: 900px) { #main-nav:not(.open) { display: none; } #main-nav ul { display: block; } #main-nav li { display: block; border-bottom: solid 1px #e3e3e3; } #main-nav li:last-child { border-bottom: none; } #main-nav a { padding: 10px 30px; } #main-nav a:hover { background-color: #e3e3e3; color: #fff; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pageOverlay"> <nav id="top-nav" role="navigation"> <ul> <li><a href="#">Join / Log In</a></li> <li><a href="#">Help</a></li> <li><a href="#">Shop</a></li> </ul> </nav> <div id="main-nav-mobile-trigger"><span>Menu</span></div> <nav id="main-nav" role="navigation"> <ul> <li><a href="#">Stretches</a></li> <li><a href="#">Mobility</a></li> <li><a href="#">Posture</a></li> </ul> </nav> </div> <!-- pageOverlay closed-->

The HTML

• I removed your container <div> s ( #header and #header-main ), as they serve no purpose as far as layout is concerned.
• There are now only three parts to the header area. In order they are:
  • #top-nav - Join/Login, Help, Shop
  • #main-nav-mobile-trigger - MENU button
  • #main-nav - Stretches, Mobility, Posture

The JavaScript

• When the MENU button ( #main-nav-mobile-trigger span ) is clicked:
  • Toggle its .open class.
  • If it has the .open class,
    • Add #main-nav 's .open class.
  • Otherwise,
    • Remove #main-nav 's .open class.

The CSS

• You had duplicates of the styling rules for each horizontal menu (formerly #nav-main and #main-navigation , which are very easy to confuse). These are now combined into one set of rules under the more general selector, nav . Additionally, their text-align is set to center by default (the desired alignment on small screen widths).
• For big screen widths ( @media all and (min-width: 901px) ):
  • Align #top-nav to the right and #main-nav to the left.
  • Hide the MENU button.
• For small screen widths ( @media all and (max-width: 900px) ):
  • If #main-nav doesn't have the .open class, hide it.
  • Display the menu items in #main-nav horizontally.

---

I hope this helps you. Best of luck with your future adventures in front-end development!

Answer 4

You can use flexbox css properties. It's very powerfull. http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html