Reza San Reza San - 4 months ago 8
CSS Question

Responsive Nav Messed up when activated in responsive mode and then resize again

I'm trying to build a responsive navigation but it seems that it will be messed up when I did the step below:
1. Resize the navigation to less than 940px
2. Activate the menu
3. Then I resize the browser again more than 940px.
4. Now the menu is not inline again. It's all messed up.

Here's the code I build. Also on codepen: https://codepen.io/rezasan/pen/YqjNMg
HTML:

<header>
<nav class="clearfix">
<div class="pullmenu">
</div>
<ul class="clearfix">
<li><a>About</a></li>
<li><a>Services</a></li>
<li><a>Products</a></li>
</ul>
<div class="logo">
<a><img src="img/site_assets/logo_nav.png"></a>
</div>
<ul>
<li><a>Media</a></li>
<li><a>News</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
</header>


CSS:

header {
position: fixed;
z-index: 1;
width: 100%;
}

.logo {
display: inline-block;
vertical-align: top;
}

.logo img {
width: 145px;
}

.pullmenu {
display: none;
}

nav {
height: 110px;
width: 100%;
background: #fff;
letter-spacing: 0.2em;
font-family: 'brandon-grotesque';
font-weight: 500;
position: relative;
text-transform: uppercase;
}

nav ul {
padding: 0;
margin: 0 auto;
display: inline-block;
}

nav li {
display: inline;
float: left;
}

nav a {
display: inline-block;
text-align: center;
line-height: 110px;
padding: 0px 20px;
font-size: 8pt;
}

nav a:hover {
text-decoration: underline;
}

@media screen and (max-width: 940px) {
.logo {
display: none;
}
nav {
height: auto;
}
nav ul {
width: 100%;
display: none;
height: auto;
}
nav li {
width: 100%;
float: none;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
nav ul:last-child li:last-child a {
border-bottom: none;
}
nav a {
width: 100%;
text-indent: 25px;
}
.pullmenu {
display: block;
background: gray;
height: 110px;
width: 100%;
position: relative;
}
}


JQuery:

$(function() {
var pull = $('.pullmenu');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});

$(window).resize(function() {
var w = $(window).width();
if (w > 940 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});


Please see attached for the messed up alignment.

enter image description here

Answer

Found the solution. This is due to the slideToggle that change two ul's to display as a block when resize back to normal screen. Solution was to create a div that wraps the two ul's together and use that div as a target to be controlled. Then media query will hide the class when browser width is short. Finally slidetoggle the div instead.

http://codepen.io/rezasan/pen/YqjNMg

HTML

    <header>
      <nav class="clearfix">
        <div class="pullmenu">MENU
        </div>
        <div class="nav-group">
          <ul class="clearfix">
            <li><a>About</a></li>
            <li><a>Services</a></li>
            <li><a>Products</a></li>
          </ul>
          <div class="logo"><a><img src="http://placehold.it/200x100"></a></div>
          <ul>
            <li><a>Media</a></li>
            <li><a>News</a></li>
            <li><a>Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>

CSS

    header{
          position: fixed;
          z-index: 1;
          width: 100%;
    }

    .logo{
      display: inline-block;
      vertical-align: top;
    }

    .logo img{
      width: 145px;

    }

    .pullmenu{
      display: none;
    }

    nav {
        height: 110px;
        width: 100%;
        background: #fff;
        letter-spacing: 0.2em;
        font-family: 'brandon-grotesque';
        font-weight: 500;
        position: relative;
        text-transform: uppercase;
    }

    nav ul {
        padding: 0;
        margin: 0 auto;
        display: inline-block;
    }

    nav li {
        display: inline;
        float: left;
    }

    nav a {
        display: inline-block;
        text-align: center;
        line-height: 110px;
        padding: 0px 20px;
        font-size: 8pt;
    }

    nav a:hover{
    text-decoration: underline;
    }

    @media screen and (max-width: 940px) {
        .logo{
          display: none;
        }
        nav { 
            height: auto;
        }
        nav ul {
            width: 100%;
            height: auto;
        }

        .nav-group{
            display:none;
        }

        nav li {
            width: 100%;
            float: none;
            position: relative;
        }
        nav li a {
            border-bottom: 1px solid #576979;
        }

        nav ul:last-child li:last-child a {
            border-bottom: none;
        }

        nav a {
            width: 100%;
            text-indent: 25px;
        }
        .pullmenu {
            display: block;
            background: gray;
            height: 110px;
            width: 100%;
            position: relative;
        }
    }

JQuery

    $(function() {
        var pull    = $('.pullmenu');
        menu        = $('.nav-group');
        menuHeight  = menu.height();
        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 940 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    }); 
Comments