Menu Point with Children does not get an "active" CSS class
Permalink Browser Info Environment
When selecting a child menu point, the parent doe not get a unique CSS class. This means it doesn't get highlighted.
Can this be added?
Thank you for looking into this.
Can this be added?
Thank you for looking into this.
| Type: | Pre-Sale |
|---|---|
| Status: | In Progress |
I don't think it's possible to highlight the parent when hovering over children elements because when the cursor moves to a child it leaves the parent hover area. I'm open to ideas if you know how it can be done with CSS.
Well, I made a minor improvement to highlight non-active parents when their children are highlighted. Please have a look in v2.0.1.
Bootstrap 4 had <li> elements active, now they made <a> active instead. So I can't figure out how to highlight the parent without adding an 'active' class to the <li>'s but this will not be pure Bootstrap 5 anymore. You could try it yourself.
Bootstrap 4 had <li> elements active, now they made <a> active instead. So I can't figure out how to highlight the parent without adding an 'active' class to the <li>'s but this will not be pure Bootstrap 5 anymore. You could try it yourself.
Hello,
Thank you for this marked improvement. I will take a look at how you did that. Nice!
In my original message I was wondering if a parent menu point could be highlighted, while a child page is active. Take a sample menu:
People
-- Men [class='active']
-- Women
-- Children
When selecting any of the subpages, the child gets the class 'active'. Yet the parent remains untouched. Is there a way that 'People' could get the 'active' class as well? In my case the menu is a dropdown menu. It closes while the mouse doesn't hover over it and gives no indication as to where the user is. If that isn't possible, I will understand, of course. :-)
Thank you for looking into this.
Thank you for this marked improvement. I will take a look at how you did that. Nice!
In my original message I was wondering if a parent menu point could be highlighted, while a child page is active. Take a sample menu:
People
-- Men [class='active']
-- Women
-- Children
When selecting any of the subpages, the child gets the class 'active'. Yet the parent remains untouched. Is there a way that 'People' could get the 'active' class as well? In my case the menu is a dropdown menu. It closes while the mouse doesn't hover over it and gives no indication as to where the user is. If that isn't possible, I will understand, of course. :-)
Thank you for looking into this.
> wondering if a parent menu point could be highlighted, while a child page is active
I have just done that in the new version with the exception of the active parent element. I can't figure out how to highlight it while leaving out of its <li> area.
I have just done that in the new version with the exception of the active parent element. I can't figure out how to highlight it while leaving out of its <li> area.
I hope we don't miss each other's point. To make sure, I am sending you this example. The latest version indeed highlights the parent when hovering over a child (which is fantastic!), but not after I actually clicked on the child page and the browser navigated me there. This is what I got:
<li class="nav-item"><a class="nav-link" href="Parent">Parent</a>
<ul class="children">
<li class="nav-item"><a class="nav-link" href="Child_1">Child_1</a></li>
<li class="nav-item"><a class="nav-link active" href="Child_2">Child_2</a></li>
<li class="nav-item"><a class="nav-link" href="Child_3">Child_3</a></li>
</ul>
</li>
In this example I am now on the page "Child_2". The page "Parent" does not get the 'active' class.
Are we talking about the same thing? :-)
<li class="nav-item"><a class="nav-link" href="Parent">Parent</a>
<ul class="children">
<li class="nav-item"><a class="nav-link" href="Child_1">Child_1</a></li>
<li class="nav-item"><a class="nav-link active" href="Child_2">Child_2</a></li>
<li class="nav-item"><a class="nav-link" href="Child_3">Child_3</a></li>
</ul>
</li>
In this example I am now on the page "Child_2". The page "Parent" does not get the 'active' class.
Are we talking about the same thing? :-)