Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you want your submenu expand to the full width of the desktop menu then you need to:
– Target desktop only
– Remove the relative positioning on the top-level list items (<li>)
– Add relative positioning to top-level <ul> instead
– For the submenu <ul>, replace “left: auto” with “left: 0”.
Thread Starter
Ffgrf
(@grouchyturtle)
Here is what I have, which is almost identical to the other code, but the menu is still vertical.
.page-id-7224 .block-type-navigation .sub-menu {
display: inline !important;
left: auto;
width: 20% !important;
}
I also tried this, but then the menu isn’t visible at all.
.page-id-7224 .block-type-navigation .sub-menu {
display: inline !important;
float: left;
width: 20% !important;
}
Thread Starter
Ffgrf
(@grouchyturtle)
I even tried adding these 2 lines, but they have no effect. Either the menu is vertical or doesn’t display at all, unless hover over it.
display: block !important;
opacity: 1 !important;
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thread Starter
Ffgrf
(@grouchyturtle)
Ok, I figured part of it out. I replaced this code
.block-type-navigation li:hover ul.sub-menu li {
display: inline !important;
float: left;
width: 20% !important;
}
with this code
.block-type-navigation li ul.sub-menu li {
display: inline !important;
float: left;
width: 20% !important;
}
Now the menu appears horizontal both on hover and on all the individual pages that I want it to stay open on.
The only problem now is the spacing between the submenu items is inconsistent. Some overlap and others have varying spaces in between.