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:
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:
View this site on mobile.
Code:
/* 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 */
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.
View this site on mobile.
Comment