Angela Martinez Angela Martinez - 12 days ago 7
CSS Question

Why does my fixed navigation menu become 2 lines on scroll?

I'm really confused as to why my top navigation menu spreads out onto 2 lines sometimes. When first landing on the site, it's all on one line, but when scrolling down and then up, the last item ("Sign in") moves to the second line.

I've tried playing around with CSS but am unfortunately not good enough to pinpoint the root of the problem.

If someone can take a look that would be awesome!

Here is my URL: http://blog.koantic.com/

Thanks :)

Answer

In style.css try adding this to line 1660:

width: 100%;
display: inline-block;

full line would be:

nav#top-menu-nav, #top-menu, nav.fullwidth-menu-nav, .fullwidth-menu {
    float: left;
    width: 100%;
    display: inline-block;
}

Also change line 166 to:

min-width: 520px!important

full line would be:

ul.nav {
    min-width: 520px!important;
}

And change line 168 into this:

.et_header_style_left .logo_container {
    width: auto;
}

I've discovered that if you are on the homepage, it doesn't show but on a blog-single page it will show the weird behaviour.