[Resolved] I want Menu text then burger icon instead of Burger+Menu

[Vishvendra]

The default Hamburger comes before the Menu text. But I want them to change their on each others.

Right now it’s Hamburger Icon then Menu Text.

But I want Menu Text + Hamburger Icon.

Would you please suggest me how I can achieve that. Though I have applied multiple CSS to achieve current style for mobile only. If possible, can you also suggest me simplified wway.

Thanks 🙂

[David]

Hi there,

try this CSS:

@media(max-width: 768px) {
    .nav-search-enabled .main-navigation .menu-toggle {
        display: flex !important;
        flex-direction: row-reverse;
        align-items: center;
    }
    
    .menu-toggle .mobile-menu {
        margin-left: 0;
        margin-right: 3px;
    }
}

[Vishvendra]

Perhaps it’s working but it also showing menu and hamburger in the desktop menu at the top left corner, which I don’t need I just want to customize mobile menu.

[David]

Updated the CSS above.

[Vishvendra]

However, I made changes in the CSS you provided. Do you think there’s a problem in it.

.nav-search-enabled .main-navigation .menu-toggle .mobile-menu {
flex-direction: row-reverse;
align-items: center;
}

.menu-toggle .mobile-menu {
margin-left: 0;
margin-right: 3px;
}

[David]

Looks good to me !

[Author]

Posts