Navigation dropdown

  • tonylees

    (@tonylees)


    7 years, 4 months ago

    Hi There,
    I have created my own theme from Bootstrap 4, everything went ok except for the navigation.
    After many hours trying ot figure out why my navigation didn’t drop down, I finally fixed and thought that was job done… (I hadn’t used a navwalker), but now I find the dropdown only works when clicked (expand and retract), and the items are not in a vertical list but horizontal (wrapping to the container).

    Can anyone please advise how I change the action from click to hover, and also how do I get the sub menu to list horizontally?

    Thanks
    Tony

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years, 4 months ago

    There is script somewhere that adds and removes the “open” class attribute when the parent container is clicked. I could not locate the script, it’s not in navigation.js as expected. The “open” attribute manages whether the dropdown is hidden or not. The events that trigger such a script should be onmouseover and onmouseout.

    You can actually add new script that changes class on these mouse events, you don’t need to locate and alter the existing script. This is actually preferable so that tablet users can still tap to open dropdowns.

    A CSS only solution is also possible. Add a rule whose selector includes the :hover attribute that shows the child container on hover. When not hovering, the default no display CSS will prevail.

    It’s not clear if you want the sub-menu items to be horizontal or vertical. Most prefer vertical and that is what your site is currently doing, so I’m not going to address that aspect unless you need more information.

Viewing 1 replies (of 1 total)

The topic ‘Navigation dropdown’ is closed to new replies.