[Resolved] CSS to target sticky dropdown only in sticky navigation

[Callum]

Hi,

I’m using the following CSS to restyle the main navigation when it transitions to STICKY.

/*Sticky navigation different to main nav styling*/
#sticky-navigation {
background-color: #fcfdfd;
}

#sticky-navigation .navigation-branding {
margin-left: 10%;
}

#sticky-navigation .sticky-navigation-logo img {
padding-top: 9px;
padding-bottom: 11px;
}

#sticky-navigation .main-nav {
margin-right: 10%
}

.main-navigation.navigation-stick .main-nav ul li a,
.navigation-stick .menu-toggle {
color: #221655;
}

.main-navigation.navigation-stick .main-nav ul li:hover>a,
.main-navigation.navigation-stick .main-nav ul li:focus>a,
.main-navigation.navigation-stick .main-nav ul li.sfHover>a,
.main-navigation.navigation-stick .main-nav ul li[class*=”current-menu-“]>a {
color: #00925d;
}

The only problem is, the above code is ALSO overwriting the colours of the dropdown menu, when accessed from the sticky navigation.

To clarify, I’m happy with the style of the dropdown menu when acessed off the non-sticky navigation (which I styled natively using the generatepress options), and I’d like that same style to persist when I access the dropdown menu off the STICKY navigation.

Are you able to point me in the right direction of how to resolve this? (Either how to prevent the above CSS from restyling dropdowns in the sticky menu, or what CSS to use use to target the dropdown menu items under the sticky nagivation, so I can directly specify the style of these)?

Thanks in advance,

Callum

[David]

Hi there,

you can use the child combinator > in your CSS eg.

this which will target all anchors in the nav:

.main-navigation.navigation-stick .main-nav ul li a

becomes:

.main-navigation.navigation-stick .main-nav > ul > li > a

Just slot in the > to those lines of code.

[Callum]

Hi David,

Thanks so much – that worked.

Callum

[David]

You’re welcome

[Author]

Posts