Twitter Bootstrap 3 WordPress Starter Theme for Developers

Home Community Support Problem with menu

This topic contains 5 replies, has 3 voices, and was last updated by  danny 6 years ago.

  • Author
  • #246


    Hi there,

    I wanted to try DevDMBootstrap3 on page I’m working. The menu is constructed from categories. The sublevel links works totally fine, but the the parent shows just # and it’s not clickable. What could be the problem there?

    Like the menu doesn’t understand that there is link

    <div class="collapse navbar-collapse navbar-1-collapse"><ul id="menu-uus-tuus-main" class="nav navbar-nav"><li id="menu-item-5537" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5537 dropdown"><a title="DIY" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">DIY <span class="caret"></span></a>

  • #247


    This is how bootstrap menus work madis. Best to include a blank placeholder link for the menu header and nest the links to all your pages under it. It is done this way for the simple reason that touch devices don’t have any hover states. You would not be able to get to your dropdown on an ipad (for example) as it would always just take you to the page you touched the link for.

    • #248


      Not sure what you mean by “Best to include a blank placeholder link for the menu header and nest the links to all your pages under it”

      u mean blank placeholder DIY and then sublevel starting with same DIY

    • #249


      That is about right. 🙂 but I might rename the DIY page to something else? Maybe spell it out. There is a lot of different content strategies for this.

  • #367


    Ouch. I’m with Madis on this one. There seems to be something off with the nav walker function. It is not function like I’d expect it to, nor is the same as other sites I’ve used / developed. I’d much prefer to click on parent menu item on a desktop computer and have it go to a link if I so choose. If I choose for a non-functional menu, I’ll just give it a # url destination.

    oops. Big oops.. I just wrote 25 lines of content here, about to offer a counter argument on this one, then it hit me. The issue is mobile. Desktop is one thing, and its no big deal to mouse hover over a menu selection, and perform a task, engage CSS. With mobile, however, there are no hover events, just touch events. With that in mind, there is really no way to allow a desktop style coding for a functional link on the parent. I guess you could use JavaScript to determine which device is in use, then respond accordingly, but I’m not interested in that path. Better and easier to train the admins what and WHY this thing is designed the way it is..

    Hmm… I wish there was a handy way to remind them of this from within the customization menu…
    (suggestion follows?)

    Reminder note on menu design: On multi-tiered menus, parent menu items (those with the > caret) will be forced by the theme to be non-functional. This is to allow complete function on a mobile device. Remember there is no mouse to hover on a user’s mobile device. When a mobile user touches a top menu selection, the next tier of selections will become visible.

    (end of suggestion)

    Hmmm. An alternative design might be do it the old way, parent menu item can be either a real link or a dead #. When the menu goes mobile (and visible), all child elements are no longer hidden from view with a > caret, but are fully visible at all times with an indent to show their tiered nature. Obviously a large tablet would have to use the mobile menu, and that might not be desired.

  • #368


    This is an ongoing issue Zip. One of which I have pondered over for some time. There are a few different solutions.

    1) Use a plugin to handle the menus and replace the code calling the navigation menus in a child theme.
    2) Detect ANY device that has touch capability and show them the mobile nav instead of the regular nav.
    3) One thing I’ve been trying to experiment with is hoverIntent link and making a modified walker to handle the Bootstrap menu system. I think this WILL be the way to go as it enables those top level drop downs to be links to pages as well as drop down triggers. (So I’m working on it. :))
    4) The bit of jQuery I’m using on ‘Swatcher’ seems to do “okay” in automatically initializing the drop down on hover based on the device width. There is currently a small bug that doesn’t allow you to dismiss the menu on the second press though if you are on a touch device. Swatcher Link.

    #4 I am the most pleased with until a custom walker with hoverIntent is created as it is the least intrusive and still caters to a desktop users “normal” experience. The user experience is only slightly weird on tablets ONLY and most people might not even notice or care but it will be fixed.

    I think most people coming into this are going to be in the developer camp and equipped to handle the situation according to their project needs. Not every site actually needs drop downs and some would argue they are going away entirely. Others are fully aware of the Bootstrap philosophy on menu systems and they are already planning those accommodations.

    I think it is a bit too intrusive for me to implement any “reminders” as it would really be a personal preference and isn’t in league with the spirit of the project in remaining as hands off as possible. But you can certainly add them with a child theme.

You must be logged in to reply to this topic.