[Support request] Centering hamburger icon on mobile

[Mira]

Hi,

My desktop site has Title and Tagline aligned left, menu floating right. But I would like my mobile header to have everything centered: title, tagline below, hamburger menu below that.

I managed to center the title, tagline, and mobile menu items using this:

@media (max-width: 767px) {
.main-navigation .main-nav ul li a {
text-align:center;
}
.main-title {
text-align:center;
}
.site-description {
text-align:center;
}
}

But I cannot get the hamburger icon to center, even using some of the code found on other threads. It is still aligned right on mobile. Can you please help? This is something I often need to do on my sites.

http://box2075.temp.domains/~eatherf2/

Thanks!

[Ying]

Hi Mira,

Try this CSS:

nav#mobile-menu-control-wrapper {
    margin-left: auto;
    margin-right: auto;
}

Let me know 🙂

[Mira]

Yep, that worked! THANK YOU!!!

[Ying]

No problem 🙂

[Author]

Posts