Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thread Starter
Ffgrf
(@grouchyturtle)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Which dropdown menu are you referring to?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then do the following:
- Install this Custom CSS Manager plugin http://ww.wp.xz.cn/plugins/custom-css-manager-plugin
- use its “CSS Code” section of the dashboard to hold your CSS modifications:
-
(put this code in)
.page-id-n .block-type-navigation ul.sub-menu {
position: static;
}
- Save
Replace page-id-n with page-id-(your actual page id).
Check what happens on mobile.
Alternatively use your Child Theme style.css file to hold your CSS modifications
Thread Starter
Ffgrf
(@grouchyturtle)
That makes it appear for just a second while the page loads. Once the page is done loading it’s no longer visible.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try this instead:
.page-id-n .block-type-navigation ul.sub-menu {
position: static;
display: block !important;
opacity: 1 !important;
}
Thread Starter
Ffgrf
(@grouchyturtle)
That works, but it also causes all of the items in the navigation bar to shift down and line up with the last item in the drop down.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you show a page with the problem?
Thread Starter
Ffgrf
(@grouchyturtle)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Oh, try this instead:
.page-id-n .block-type-navigation ul.sub-menu {
left: auto !important;
display: block !important;
opacity: 1 !important;
}
Thread Starter
Ffgrf
(@grouchyturtle)
Perfect! Thanks for all the help!
Thread Starter
Ffgrf
(@grouchyturtle)
On second thought…
How would I adjust this to make the menu horizontal? I tried the following, which makes the mun horizontal on hover…although I am having spacing issues.
When I take that code and add it to page I want the menu visible on (or just replace the existing code) it doesn’t work. Either the menu stays vertical or disappears entirely.
.block-type-navigation li:hover ul.sub-menu li {
display: inline !important;
float: left;
width: 20% !important;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Are you having caching issues? On my end I see your CSS applied
Thread Starter
Ffgrf
(@grouchyturtle)
It’s applied, but it’s not working. How do I make the static menu on this page horizontal?
http://grouchyturtle.com/paddleboard-shop