Announcement

Collapse
No announcement yet.

How to Convert Hamburger Icon to "Menu" on Mobile

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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:

    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 */
    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.
    Last edited by glennrocksvb; 10-04-2023, 06:20 PM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

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

    Comment


      #3
      On my iPhone (11 Pro Max), I see 'Menu' and I don't have this CSS code. Same is true on my iPhone 8.
      The Linux Community has given me much. I do what I can to return the favor!

      Comment


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

        Click image for larger version

Name:	image.png
Views:	132
Size:	21.3 KB
ID:	28053ā€‹
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          Originally posted by glennrocksvb View Post
          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.
          The Linux Community has given me much. I do what I can to return the favor!

          Comment


            #6
            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.

            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #7
              Click image for larger version

Name:	image.png
Views:	83
Size:	136.7 KB
ID:	28058ā€‹
              Originally posted by glennrocksvb View Post
              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.
              The Linux Community has given me much. I do what I can to return the favor!

              Comment


                #8
                I thought you were referring to your site. I've added the code on this site that's why you see it here.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #9
                  Originally posted by glennrocksvb View Post
                  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
                  The Linux Community has given me much. I do what I can to return the favor!

                  Comment


                    #10
                    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.
                    The Linux Community has given me much. I do what I can to return the favor!

                    Comment


                      #11
                      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.

                      Comment


                        #12
                        Originally posted by Snowhog View Post
                        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.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


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

                          Comment


                            #14
                            For the hamburger menu? No.
                            Helpful? Donate. Thanks!
                            Buy me a coffeePayPal QR Code
                            Fast VPS Host for vBulletin:
                            A2 Hosting & IONOS

                            Comment


                              #15
                              Added. thanks.

                              Comment

                              Users Viewing This Page

                              Collapse

                              There is 1 user viewing this forum topic.

                              • Guest Guest

                              Latest Posts

                              Collapse

                              Working...
                              X
                              Searching...Please wait.
                              An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                              Please push the back button and reload the previous window.'
                              An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                              Please push the back button and reload the previous window.'
                              An internal error has occurred and the module cannot be displayed.
                              There are no results that meet this criteria.
                              Search Result for "|||"