Free Mod How to Convert Hamburger Icon to "Menu" on Mobile

[glennrocksvb]

On mobile, the main navigation header collapsed into a Hamburger menu dropdown. If you don't like the Hamburger icon (3 horizontal bars) and want to change it to the word "Menu" (or any word including non-English words) with down arrow (when inactive) and up arrow (when active), then you simply add this custom CSS code in css_additional.css template in each of the active theme your forum is using:

/* Convert Hamburger Icon to "Menu" - START */
.l-small #channel-tabbar .b-comp-menu-dropdown__trigger--icon-trigger {
    display: flex;
    align-items: center;
    height: {vb:stylevar header_tab_height};
    padding: {vb:stylevar header_tab_padding};
    margin: {vb:stylevar header_tab_margin};
    font: {vb:stylevar header_tab_font};
    color: {vb:stylevar header_tab_text_color};
    text-decoration: {vb:stylevar header_tab_text_decoration};
}

.l-small #channel-tabbar .b-comp-menu-dropdown--open .b-comp-menu-dropdown__trigger--icon-trigger {
    background: {vb:stylevar header_tab_background_active};
    color: {vb:stylevar header_tab_text_color_active};
    text-decoration: {vb:stylevar header_tab_text_decoration_active};
}

.l-small #channel-tabbar .b-comp-menu-dropdown__trigger--icon-trigger::before {
    content: 'Menu';
    font-weight: bold;
}

.l-small #channel-tabbar .b-comp-menu-dropdown__trigger--icon-trigger::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 0;
    border-color: {vb:stylevar header_tab_text_color} transparent transparent;
}

.l-small #channel-tabbar .b-comp-menu-dropdown--open .b-comp-menu-dropdown__trigger--icon-trigger::after {
    border-width: 0 4px 5px;
    border-color: transparent transparent {vb:stylevar header_tab_text_color_active};
}

.l-small #channel-tabbar .b-icon__hamburger {
    display: none;
}
/* Convert Hamburger Icon to "Menu" - END */

The above CSS code uses style variables to inherit styles (font, color, background, padding, margin, etc.) from the main navigation header of the current theme. For forums that support multiple languages, you can add a new phrase in the Phrase Manager and use it like '{vb:phrase phrase_var_you_use_for_menu}' instead of 'Menu'.

NOTE: You may need to tweak the above code if you have existing style customizations in the main navigation header in css_additional.css template. Let me know and I can help adjusting the code for you.

Compatibility:

• vBulletin 5 and 6 (self-hosted)
• Not compatible with vBCloud as it does not allow stylevars in css_additional.css template. A vBCloud version is not impossible to do but it will require the values to be hardcoded in place of the stylevars and those values may be different for each vBCloud site.

Demo:
View this site on mobile.

[Eolesen]

I've installed it... and it works great for my aging membership who didn't know what the menu/hamburger icon was.....

[Snowhog]

On my iPhone (11 Pro Max), I see 'Menu' and I don't have this CSS code. Same is true on my iPhone 8.

[glennrocksvb]

Snowhog, I see the hamburger icon on your site on my Android phone and any phone using mobile emulator on Chrome.

[Snowhog]

Snowhog, I see the hamburger icon on your site on my Android phone and any phone using mobile emulator on Chrome.

Safari browser on Apple iPhones, so this isn't an issue on that browser then.

[glennrocksvb]

Just curious, can you post a screenshot from your iPhone?

You must have added custom CSS to do that then. vB5 (and even vB6) uses hamburger icon by default.

[Snowhog]

You must have added custom CSS to do that then. vB5 (and even vB6) uses hamburger icon by default.

I have not added this CSS code.

[glennrocksvb]

I thought you were referring to your site. I've added the code on this site that's why you see it here.

[Snowhog]

I thought you were referring to your site. I've added the code on this site that's why you see it here.

Doh! I’m a doofus

[Snowhog]

An observation only, not a 'nag', but this MOD doesn't handle 'collapsed' menu entries, Posts being one. Posts is a 'sub-menu' of other entries. So with this MOD, when you click on Posts, it doesn't expand to the three sub-menu entries.

[Eolesen]

It's respecting the hierarchy of the navigation as defined in VB.

If you click on "Posts", it will bring you to the landing page for Posts, and clicking on Menu again should show you the sub-menu entries under Posts. It would be nice to have the expanding sub menus, but I believe Glenn already has a paid mod for that.

[glennrocksvb]

An observation only, not a 'nag', but this MOD doesn't handle 'collapsed' menu entries, Posts being one. Posts is a 'sub-menu' of other entries. So with this MOD, when you click on Posts, it doesn't expand to the three sub-menu entries.

That's not part of this mod. This is only to replace the hamburger icon with "Menu". But I agree that the default vB5/6 behavior for submenu handling on mobile is not good. I'm not sure if there's already an improvement ticket for this in the vB tracker.

[Mitch]

Glenn, do you have a custom CSS for my site?
TY

[glennrocksvb]

For the hamburger menu? No.

[desmomax]

Added. thanks.