Hamburger Menu Inline With Logo

[chrismaxwellMember]

I'd like to get my hamburger menu icon inline with my logo (logo to left, hamburger to right) when the browser window gets smaller but it's currently appearing below.

Thanks in advance for your help.

Chris

http://chrismaxwell.co

[CleanPageDomParticipant]

You need to change a couple of lines in your media queries in style.css.

Look for @media only screen and (max-width: 1023px)

The reason the hamburger is jumping below the site title is because at 1023px and below, the right header widget resizes to 100%, so look for:

.content, .footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.minimum-landing .site-inner,
.sidebar,
.site-header .widget-area,
.site-tagline-left,
.site-tagline-right,
.title-area {
width: 100%;
}

Below that, add:

.site-header .widget-area {
width: 20%
}

If you want to keep your code a little neater, remove .site-header .widget-area from the first list.

Then you need to add some padding to the widget-area, otherwise it will sit right at the top of the screen. So find

.site-header .widget-area {
padding: 0 5%;
}

Change this to:

.site-header .widget-area {
padding: 17px 5% 0;
}

You can experiment with the 17px.

Hope that helps.

Thanks
Dom

---

Let’s build a website together…

[chrismaxwellMember]

You're a legend Dom, thank you... hamburger fixed!

Another problem has cropped up now. When you click the hamburger the menu items are all squished over to the right but I'd like them to float to the left, full width of the black header area if possible.

Any thoughts?

Thanks
Chris

[CleanPageDomParticipant]

Sorry for the delay. Just looking into it now. It's because I told you to reduce the width of the widget area. May have to take a different approach.

Dom

---

Let’s build a website together…

[CleanPageDomParticipant]

OK, try this.

Go bakc to the media only screen and (max-width: 1023px) in style.css

Where I told you to:

.site-header .widget-area {
width: 20%
}

Change to:

.site-header .widget-area {
float: none;
width: 100%;
}

Leave the padding as is. It's working for me in the Chrome emulator. See how it goes on the live site. If it doesn't quite work, then we can play with position: relative and go at it from that way.

Sorry for the mix-up.

Thanks
Dom

---

Let’s build a website together…

[chrismaxwellMember]

Excellent Dom, that's it sorted now.

No need to apologise, you've helped me a great deal.

Thank you,
Chris

[Author]

Posts