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 menuis 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

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 2

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 3

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

Answer 4

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;
  }
}