Menu burger icon not aligning centrally

TheKiln · August 2016

Hi guys,

Trying to work out why my mobile menu (hamburger icon) is not aligning centrally with the top bar? As you can see it is very low and doesnt look great.

See image attached:

Here is my site so far:

http://coilteklive.thekiln.com.au/

cheers

Albert · August 2016

Hi,

you have changed header's height on mobile with custom css and that's why responsive menu icon does not align properly. What you need to do is move it to the top with an extra css now:

#Header a.responsive-menu-toggle { top: 10px !important; }

TheKiln · August 2016

Thanks for that, I am still trying to left align the logo on mobile and right align the burger menu...

Any ideas?

thanks so much.

Albert · August 2016

The responsive menu icon is already aligned to the right side on mobile but to align logo to the left side, you need to use the following css:

@media only screen and (max-width: 767px) {
    #Top_bar .logo { text-align: left !important; }
}

TheKiln · August 2016

Thanks - have inserted the css but it still does not work... any ideas?

Albert · August 2016

So if above css does not work, please use the following css instead:

@media only screen and (max-width: 767px) {
    #Top_bar .logo { text-align: left !important; }
    #Top_bar .logo #logo { margin-left: 0 !important; }
}

TheKiln · August 2016

Excellent - thank you that worked.

Albert · August 2016

You are welcome

Menu burger icon not aligning centrally

Comments