[Resolved] how can i make the secondary menu sticky?

Home Forums Support how can i make the secondary menu sticky?

  • This topic has 11 replies, 3 voices, and was last updated 1 year ago by Christian.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #990759
    Kim

    thanks!

    #990771
    David
    Staff
    Customer Support

    Hi there,

    any chance i can see the Site? The CSS required will depend on the layout of the navigation and the height of the different elements.

    #991132
    Kim

    Yes, of course. It’s here:

    https://backtomobility.ca/

    Thanks!

    #991358
    David
    Staff
    Customer Support

    Try this CSS:

    .secondary-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 83px;
    }
    
    @media(min-width: 1301px) {
        .secondary-navigation {
            top: 116px;
        }
    }
    #991538
    Kim

    hmmm

    That didn’t work. I got to errors (exclamation marks).

    One said: Expected (static | relative | absolute | fixed) but found ‘webkit-sticky’

    The second said: Expected (static | relative | absolute | fixed) but found ‘sticky’

    Does that help?

    #991540
    David
    Staff
    Customer Support

    I assume this is in Customizer > Additional CSS. You can safely ignore them by clicking the checkbox provided at the top of the CSS field. WP parses only older CSS2 properties.

    #991797
    Kim

    Yes, this is Customizer > Additional CSS. But I can’t see a chechbox anywhere…

    #991872
    David
    Staff
    Customer Support

    You should be able to just publish the changes then.
    If you have any other CSS in Additional CSS paste the code i gave you at the very top of the code stack.

    #993519
    Christian

    I’m researching a similar question. On looking at the code I saw a typo in the code:

    .secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 83px;
    }


    @media
    (min-width: 1301px) {
    .secondary-navigtion {
    top: 116px;
    }
    }

    In the second part there is an “a” missing: navigation:

    Maybe it helps to change the code to:

    .secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 83px;
    }


    @media
    (min-width: 1301px) {
    .secondary-navigation {
    top: 116px;
    }
    }

    Best, Chris

    #993585
    David
    Staff
    Customer Support

    Good spot Chris – i think i am need of some spectacles . code updated above 🙂

    #993980
    Kim

    Thank you both. Chris, that worked perfectly.

    #994321
    Christian

    Kim, happy to hear that it works now! Have a great summer…

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.