I’m trying to set an active border on the top of the top level menu items in nav nestable. When I do this the active menu item is moved vertically downwards by the thickness of the border. To compensate for this I thought I would add a transparent top border to all menu items and then the active border would replace the inactive border getting rid of the misalignment. However, the active border is being added at the bottom of the transparent border so the menu item is still offset.
Here is a screenshot where I have set green as the inactive border colour and white as the active colour and you can see how the inactive border is not being replaced by the active one.
Is there some other way of adding a menu item border without it changing the alignment with other menu items?
I reproduced the issue and added it to our bug tracker.
The assignment of the border styles is not correct in this case. The active styles land on the a, and the inactive styles on the li. Accordingly, you get the double border.
Custom CSS workaround:
root .brx-nav-nested-items > li > a {
border-top: 3px solid transparent; /* change the border-width accordingly */
}
Unfortunately this hasn’t been fixed in 1.8.4 or the fix has broken something else:
create a menu that has some text links and dropdowns (with a submenu) in the top level
add a 3px solid transparent border on all top level menu items
add an active 3px solid coloured border on all top level items
select one of the text links in the top menu. You will see the active border appear
select a menu item from the submenu of one of the dropdowns. You will see that the active border does not appear for the top level menu item. Inspect the code and you will see that the transparent border on the div of the dropdown is still active and is overwriting the coloured border:
If you have a dropdown in the top level menu that has a submenu and an item in that submenu is a dropdown with a submenu, then a border is being applied twice to the dropdown item in the first submenu on hover (and I would assume active and other states). Inspecting the code, the li of the dropdown and the following div are both having a border applied.
You can see it here: https://staging.ottervalechurches.org
Hover over Connect in the top menu to display the submenu and then move your mouse down the submenu and you will see a 3px solid border appear for each item on hover which is correct. Now go do the same with the Churches menu and you will see a 6px line appear on each item in the submenu that is a dropdown (so it doesn’t happen to ‘Find a church’).
