Display Menu Text below Mobile Hamburger Icon

Hi David,

You can give this CSS a try:

#mobile-header .menu-toggle {
    display: flex;
    flex-direction: column;
}

But for detailed layout adjustment, I'll need to see the site since every site has a different layout setup.

You can share the site link in the private info field.

Let me know :)

Works in theory, however when you go to reduce the 'Menu' text size, it also reduces the Hamburger icon.

One method I used is to disable the Menu text. In css add an after and in that include a content for the text and use relative position to move the menu text to the correct place.

Not sure that's the best way.

That'll do too.

But if you are willing to use CSS to add pseudo element, then you can easily use CSS to adjust the default menu label font size as well.

I think both ways will do, just personal preferance :)

Let me know if you need further assistance.

This code below got it working :-) However if I disable the mobile header, what do I change my css too?

#mobile-header .menu-toggle {
display:flex;
flex-direction: column;
}

span.mobile-menu {
line-height: 30px;
font-size: 14px;
padding-left: 0px!important;
}

@media (max-width: 768px){
.main-navigation:not(.slideout-navigation) a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items {
font-size: 40px;
}
}

Just remove the #mobile-headershould work :)

It didnt work as expected if I removed the mobile header option and removed the #mobile-header, it then displayed the hamburger and the menu text on desktop also. When I added the @media query that sorted it, I now believe this code will work with or without mobile header :-)

@media (max-width: 768px){
button.menu-toggle {
display: flex!important;
flex-direction: column;
padding-right: 10px!important;
}

.menu-toggle {
line-height:1em;
}

span.gp-icon.icon-menu-bars {
font-size:30px;
}
span.mobile-menu {
font-size: 10px;
padding:0px!important;
}
}

Good job :)

Glad you figured it out!

Good job :)

Glad you figured it out!