No announcement yet.

Mobile Menu Sub-Nav Dropdown

  • Filter
  • Time
  • Show
Clear All
new posts

  • Mobile Menu Sub-Nav Dropdown

    Hi There,

    Support Variables
    • 5.5.5 - vBulletin
    • 7.3.7 - PHP
    • 5.6.44-cll-lve - MySQL
    • vbmods (Main Navigation Menu Dropdown) - Addons
    • Yes - Default Style Issue Present
    • Yes - English language
    • No - Error Message on Screen
    • Chrome 78.0.3904.108 (Official Build) (64-bit) - Browser
    • Cleared - Browser Cache & Cookies

    I am trying to figure out how the mobile menu works with regard to sub-nav drop downs.

    AIM & GOAL
    I would like to modify the mobile code to add dropdown toggle icons and give a similar display of the Message Forum sub-nav items. If it can't be done dynamically (toggle on & off) can I force the sub-nav items to be displayed in full as with the Message Forum default items?

    Does anyone know how?

    Automatic Sub-Nav Dropdown

    By default the sub-nav items under the Message Forum top level menu, automatically dropdown, as shown in the screen shot below:

    Message Forum
    • New Topics
    • Today's Posts
    • Help

    Top Level Menu Items (No Dropdown)

    The other top level menu items that were added via the vBulletin
    • My Account
    • Email & Password
    • Lessons
    • Recordings
    • Schedule
    • Resources

    Admin CP > Navigation Bar Editor

    Do not automatically drop down...
    and there are no triangle (dropdown toggle icons) present.

    Mobile Menu CSS

    I am struggling to figure out which part of the mobile menu CSS is controlling the sub-nav dropdown logic.

    Reading the code, it is quite complicated to pinpoint the sub-nav dropdown logic CSS & JS and I'm up against a time deadline for this project.

    Style Manager > Edit Templates > CSS Templates
    • css_b_comp_menu_dropdown.css
    • css_b_comp_menu_horizontal.css
    • css_b_comp_menu_vert.css
    • css_responsive.css
    Is there any chance anyone can point me to the place(s) where the sub-nav code drop down logic is controlled?

    Many thanks if you can help.


  • #2
    There is an add-on that turns the navigation into Dropdowns on
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API


    • #3
      Hi Wayne,

      Thank you for the suggestion and yes that mod is what I'm using. However the mod turns off drop down functionality, switching to the standard vBulletin mobile menu code, this is by design within the mod.

      I finally figured out the section of the header template that controls the building of the main menu & sub-nav items but I can't get it to build sub-nav items under any main menu item except the Message Forum.

      The basic logic issue (as I read it and I may well be wrong) is vBulletin queries which page.channelid or page.nodeid you are on and only pulls the navbaritems for the Message Forum page section. This is so frustrating.

      <vb:comment><!-- ***** MAIN NAVIGATION TABS ***** --></vb:comment>
      <nav id="channel-tabbar" class="h-clearfix noselect">
          <ul class="channel-tabbar-list h-left b-comp-menu-horizontal js-comp-menu-horizontal js-comp-menu--dropdown-on-small b-comp-menu-dropdown--inactive js-comp-menu-dropdown__content--main-menu h-hide-on-small js-shrink-event-parent">
              <vb:if condition="!empty($page['channelid'])">
                  {vb:set navbarCurrentChannelId, {vb:var page.channelid}}
              <vb:elseif condition="!empty($page['nodeid'])" />
                  {vb:set navbarCurrentChannelId, {vb:var page.nodeid}}
              <vb:else />
                  {vb:set navbarCurrentChannelId, 0}
              {vb:data navbarItems, 'site', 'loadHeaderNavbar', '1', {vb:raw _SERVER.REQUEST_URI}, 0, {vb:var navbarCurrentChannelId}}
              {vb:set navbarItemCount, {vb:php count, {vb:raw navbarItems}}}
              <vb:each from="navbarItems" key="idx" value="navbarItem">
                  {vb:set navbarTitle, {vb:raw navbarItem.title}}
                  {vb:set normalizedUrl, {vb:raw navbarItem.normalizedUrl}}
                  <vb:if condition="!empty($navbarItem['current'])">{vb:set subnavItems, {vb:raw navbarItem.subnav}}</vb:if>
                  <li class="{vb:if "!empty($navbarItem['current'])", "current"} section-item js-shrink-event-child">
                      <a {vb:if "!empty($navbarItem['newWindow'])", "target='_blank'"} {vb:raw navbarItem.attr} href="{vb:var normalizedUrl}" class="h-left {vb:var navbarTitle}">{vb:phrase {vb:raw navbarTitle}}</a>
                      <vb:if condition="$idx < ($navbarItemCount - 1)">
                          <span class="channel-tabbar-divider"></span>
                      <span class="mobile dropdown-icon"><span class="icon h-right"></span></span>
              {vb:hook 'header_tabbar'}
      Is there anywhere I can put a future feature request in for development? I would like vBulletin to build out the sub-nav menus under each main nav <li> and indent list them as with the Message Forum section. Drop down toggles are nice but not essential but the sub-nav items being listed offer much better mobile functionality.

      Thanks for the help and consideration of the development request.



      • #4
        The navigation bar automatically switches to a drop down menu for mobile devices. Have you used the software at smaller screen sizes?

        Click image for larger version

Name:	2019-12-10_11-59-26.png
Views:	227
Size:	104.6 KB
ID:	4429247Click image for larger version

Name:	2019-12-10_11-59-54.png
Views:	193
Size:	92.9 KB
ID:	4429248
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API


        • #5
          The sub-navigation is not loaded in the HTML unless it is relevant to the page. Doing so will create unnecessarily large menus on mobile. I guess I am not understanding what you're trying to do.

          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API


          Related Topics


          • CorbinH
            Mobile Menu
            by CorbinH
            I was wondering how to change the Mobile Menu back to a BAR Menu. All of the different themes I select, only show the Mobile Menu.
            Here's your BAR menu display when I choose GRUNGE ....
            Fri 14 Sep '18, 11:25pm
          • Dmitrij
            Menu Tabs problem
            by Dmitrij
            I have a problem with menu tabs of vbulletin (v. 5.5.0)

            Instead of such menu, as on the top of this site (Forums: New Topics, Today's Topics etc.) Iэму got a square form...
            Mon 4 Feb '19, 11:04am