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

Home Forums Support CSS to target sticky dropdown only in sticky navigation

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1328018
    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

    #1328221
    David
    Staff
    Customer Support

    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.

    #1329270
    Callum

    Hi David,

    Thanks so much – that worked.

    Callum

    #1329537
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.