Make nav use hamburger menu at 1200px and below

[lobsterass]

Hola awesome developers!

I’m using some custom CSS for my nav. Now I have problem figuring out something that usually isn’t very difficult for me. I would like my nav menu to become hamburger nav on 1200 px screen and below. Please help.

This is my custom for nav:

.header-row .span4.logo-left {
width: 20%;
}
.header-right.span8 {
width: 75%;
}
.header-4 nav .menu > li > a, .header-5 nav .menu > li > a, .header-4 nav#main-navigation .menu > li > a, .header-5 nav#main-navigation .menu > li > a {
padding: 0 5px!important;
}

[David Martin – Support]

Hey,

Have you tested the theme option for that:

Admin -> Theme Options -> Header Options -> Header Options -> Display Mobile Header on Tablet Landscape

Thanks.

[lobsterass]

Hi, yepp. Not working.

Attachments:

You must be logged in to view attached files.

[lobsterass]

What’s the CSS for making nav going hamburger below 1200 px?

[David Martin – Support]

Hi,

Please test this:

@media only screen and (max-width: 1024px) {
.header-right > nav:first-child {
    display: none;
}
.mh-tabletland #logo {
    margin: 10px 20px 5px;
    float: none!important;
    width: 100%;
}
#main-navigation {
    display: none!important;
}
.hidden-desktop {
    display: block!important;
    height: auto;
}
}

Thanks.

[lobsterass]

Hi!

Thanx! Almost. I put 1200px instead of 1024px and that brings out the hamburger but it’s misplaced in the bottom of nav. I would love for it to stay in the top right corner. Please see attached images.

<3

A

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Can you add in the CSS so as I can see this in situ?

Thanks.

[lobsterass]

Hi David!

Done. Please check it out: http://monroedesign.se/

[David Martin – Support]

Thanks, please check now.

– David.

[lobsterass]

Hi David!

It looks great! Thanx. It’s hard to click it on a mobile as there’s no padding to right of the hamburger. Please see image. How do I add like 15 px padding on the right of the hamburger?

One big problem though…the hamburger doesn’t expand the drop down menu. I’m not sure what happened here. Do you know? I gotta fix it. This is my live site. 🙂

<3
A

Attachments:

You must be logged in to view attached files.

[lobsterass]

I fixed the padding issue. Only gotta make the hamburger clickable now. 🙂

[David Martin – Support]

Hi,

Was your mobile menu working correctly before this? Please re-test without the code added?

Thanks,
David.

[lobsterass]

Hi!

Yes, it works when I remove:

@media only screen and (max-width: 1200px) {
.header-right > nav:first-child {
display: none;
}
.mh-tabletland #logo {
margin: 10px 5px 5px;
float: none!important;
width: 100%;
}
#main-navigation {
display: none!important;
}
.hidden-desktop {
display: block!important;
height: auto;
}
#logo a:first-child {
float: left;
}
}

[David Martin – Support]

For me it does not work, can you clear your cache?

Thanks.

[lobsterass]

I just removed it. I’m testing it in an incognito window. Now, I put it back for you.