No announcement yet.

Main Navigation Menu Dropdown

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

    Official - Paid Main Navigation Menu Dropdown

    By default, vBulletin 5's main navigation menu only displays the sub-menu for the currently active main menu. If you are in a forum page and you want to create a new blog, you would have to click Blogs first then click "Create a New Blog". That's two clicks. If we display the sub-menus as you hover each main menu item, then you would have to click only once. This is a better user experience as user might have expected from a standard main menu navigation from other sites.

    Note: This mod only transforms the main navigation menu for bigger screens (desktop). The navigation menu for smaller screens (mobile) are not changed.

    For vBCloud version, click here.

    Please see the main menu navigation at the top of this forum.

    Please refer to the installation document included in the file.

    Price 1:

    $20 (with branding in the footer)

    Buy Now Add to Cart View Cart

    Price 2: (NOTE: If you already bought this mod with Price 1 when there was no Price 2 yet, then do not purchase this one but contact us to pay only $25)

    $45 ($20 base price + $25 branding-free)

    Buy Now Add to Cart View Cart

    Need help or not comfortable installing this mod? Purchase the installation service below:

    Product Installation Add-On: $20
    Purchase this product add-on to get professional installation of this mod from us.

    Add to Cart View Cart

    Don't have a PayPal account yet or want to use a new account to purchase this mod? Sign up with PayPal now and get $5 reward!
    Last edited by glennrocksvb; 04-03-2019, 11:31 AM.

    I'd love to implement this on my site. Is it still in development?


      It's basically done but I still need to optimize it to make it run more efficiently. Check back for future updates on this thread.


        This mod is now available. Please see first post.


          I can't figure out how to change the little down arrow's color. I need it to be dark, as you can see the others are invisible:
          Click image for larger version

Name:	arrow.jpg
Views:	283
Size:	168.9 KB
ID:	385


            Please ignore:

            .l-desktop .section-item.custom-has-subnav::after {
                border-color: #000 transparent transparent transparent !important;


              One last thing. When hovering over a menu option and navigating away from it the hover sticks.... For example you can see where both menu options are highlighted also the mouse pointer is not ontop of the menu option:

              Click image for larger version

Name:	hover.jpg
Views:	276
Size:	169.0 KB
ID:	388


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                I'll look into that.

              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                The issue doesn't occur on this site Do you have custom css that may interfere with this mod?

              Would it be possible to have the most recent version of this sent to me again? I didn't download the recent update in time and my link expired.


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                Please PM me the order id and your name you are using in Paypal.

              Bought this mod and I really like it. There is a problem for touch screen devices such as tablets though.
              When you click on the arrow for the dropdown menu. The sublinks show for a few seconds while the page loads the link that was clicked.

              For instance when clicking the BLOGS tab. the page already loads "". You have to be fast to click the NEW ENTRIES link.


                That's an inherent problem with touch devices which doesn't have hover event. If you'd do it as click for touch devices, then you'd lose the ability to click on the main menu and go that page. In your example, you won't be able to go to /blogs

                ​​​I'll check if there's a workaround.
                Last edited by glennrocksvb; 04-01-2017, 11:24 AM.


                  I made a workaround by changing the forums link to # and adding a link "Forum Home" to that menu.

                  Click image for larger version

Name:	menu-.jpg
Views:	201
Size:	13.3 KB
ID:	3727

                  An other small usability detail:

                  When inspecting the menu, the arrow pointing down is in an other area then the forum link.
                  When I point my mouse cursor between the FORUMS link and the ARROW DOWN. the dropdown menu disappears.
                  This is annoying because sometimes when you want to select a link from a menu and move your cursor in a specific way the dropdown will not appear.

                  Would it not be better if the arrow was a background image inside the <li> element? Or is there a better wat to improve this?


                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    Will look into it. Thanks for reporting.

                  Hi Glenn,

                  I can't figure this css out. When I mouse over a menu item and then drag the pointer upwards the text remains white after leaving it.

                  I see

                  #channel-tabbar ul li.selected:not(.current) > a {
                  color: #FFFFFF !important;

                  But if I change it in additional_css the effects do not happen.

                  Click image for larger version  Name:	point off.jpg Views:	1 Size:	28.6 KB ID:	3749



                    I'll take​ a look when I get home.


                      No rush. I'm trying to make the background white to match the rest of the navbar. However, the text needs be black and remain black when the menu option is either selected or not selected.

                      Thanks Glenn,


                        I see a different default theme on your site which looks like the vB5 Default Style. I don't see the style in the screenshot you posted

                        Anyway, the trick to debug the CSS for this particular mod is to add "selected" class in the <li> element with "section-item" class and then setting "display: block" in the submenu dropdown <ul> (with class "custom-subnav-dropdown") inside the section-item element. When you do this, the submenu dropdown will be kept opened and you can inspect the elements without the dropdown being hidden to customize the style.