Archived topic

I want Menu text then burger icon instead of Burger+Menu

5 replies · Started by Vishvendra on August 9, 2020

Viewing posts 1–6 of 6

August 9, 2020 at 2:08 am #1393648

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 :)

August 9, 2020 at 7:52 am #1394064

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;
    }
}

August 9, 2020 at 5:04 pm #1394566

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.

August 9, 2020 at 5:07 pm #1394572

Updated the CSS above.

August 9, 2020 at 5:08 pm #1394573

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;
}

August 10, 2020 at 2:36 am #1394964

Looks good to me !

This archived topic is closed to new replies.

Start building better websites today.