[Support request] Nav menu CSS for sub-levels of items

[porkopolis]

RE: https://porkopolis.org/t1-2020/

Hi Folks!

I am building a child theme for GeneratePress and I’ve struggled with this problem and have come to decide it is beyond my skill/knowledge and I need your help, please.

Using the Customize under Colors in the Primary Navigation I have set the “Background Current” for Parents and Sub-Menu Items to a shade of red (#ed384a). So now I can navigate to a Parent menu item, say “Library” and then a sub-menu item, say “Anthologies”.

https://porkopolis.org/t1-2020/library/anthologies/

From here, if I move my cursor up to hover over the already red “Library” it remains red and in the the drop-down list of sub-menu items the “Anthologies” item is also red.

I want to set up this same effect for two deeper sub-levels. Currently if I go to

https://porkopolis.org/t1-2020/library/anthologies/gday-pig-choice-bro/

the “Library” parent item in the menu bar is red, but when I hover over the “Library” parent it turns black (#424242) and the “Anthologies” sub-menu item is not red.

I’m guessing this requires additional CSS in the style.css file using nested ul or li tags and CSS selectors, but I am stumped on exactly how to do this…

Here is a list of the current links where the menu is 3 or 4 sub-sections deep and the above described problem exists:

https://porkopolis.org/t1-2020/library/pig-poetry/%5Bany of 300+ poets listed]
https://porkopolis.org/t1-2020/library/anthologies/gday-pig-choice-bro/
https://porkopolis.org/t1-2020/library/anthologies/o-pig-o-canada/
https://porkopolis.org/t1-2020/library/anthologies/courtiers-circe/
https://porkopolis.org/t1-2020/library/reading-room/lavery-milwaukee-irish-freedom/
https://porkopolis.org/t1-2020/library/reading-room/swine-of-the-times/
https://porkopolis.org/t1-2020/library/reading-room/farm-tales-cj-mouser/
https://porkopolis.org/t1-2020/library/reading-room/farm-tales-cj-mouser/%5B10 each stories under this heading]
https://porkopolis.org/t1-2020/library/reprint-series/the-expositor-by-pinchbeck/

https://porkopolis.org/t1-2020/pig_artist/ [any of 200+ artists listed]
https://porkopolis.org/t1-2020/art-museum/exhibitions/les-porcs-en-plein-air/
https://porkopolis.org/t1-2020/art-museum/exhibitions/st-anthonys-swine/

Apologies for the long explanation :). Thank you for your help…

DAN

[David]

Hi there,

if i understand correctly, try adding this CSS:

.main-navigation ul ul li.current-page-ancestor a {
    background-color: #ed384a;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts