Sticky header?

  • Resolved wiredpinecone

    (@wiredpinecone)


    2 years, 9 months ago

    Hi, I’m trying to create a sticky header, and nothing seems to work. This seems like a really basic, common need issue but I’ve searched long and hard and come up with no guidance for Twenty Twenty Two.

    In the site editor, I assigned the class .topnav to the navigation but it won’t work. Getting it sticky (using “fixed” rather than “sticky” in the css) did work briefly in the backend (but not the frontend), but I could not get the background to be consistently black as the page is scrolled. It just disappeared entirely on the frontend.

    Along with that, I’d like to get the logo to automatically shrink as the page is scrolled.

    Thanks in advance!

Viewing 8 replies - 1 through 8 (of 8 total)

  • Can you post the CSS code you are using? Also, how is your CSS implemented? Via plugin or added via a functions.php?

    Thread Starter wiredpinecone

    (@wiredpinecone)

    In Appearance > additional css:

    .topnav { position: sticky; top: 0; left: 0; right: 0; z-index: 1000;
    }

    I changed the topnav to reference just the column for the moment to avoid the logo-resizing issue, but even so, everything slides behind ie videos on the page, the z-index does not seem to be applying.

    I must be missing something. How did you find:
    Appearance > additional css:

    With the Twenty Twenty Two theme active? When I do that, my only options are Themes and the Beta Editor. I would love to find a location for Additional CSS with this theme. Thanks!

    Thread Starter wiredpinecone

    (@wiredpinecone)

    Here’s the link: https://staging2.readingpokertells.video/

    Thread Starter wiredpinecone

    (@wiredpinecone)

    @saturn3 I think it’s via having Jetpack connected.

    I’m redoing an old site that was on Genesis, so something else may have rolled over into the new dashboard, but I’m pretty sure it’s via Jetpack.

    @wiredpinecone: just tested your css code on a fresh local install of 2022 (without genesis or jetpack) and everything works as expected.

    Try adding the css code to style.css directly and see if it works there.

    You could always switch to a child theme with his own css if you don’t want to modify the main style.

    Thread Starter wiredpinecone

    (@wiredpinecone)

    Got it to work as a child theme via both Jetpack css and style.css. Thanks!

    @wiredpinecone

    Can you share the CSS you have used? I also want to keep the header float.

    TIA

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Sticky header?’ is closed to new replies.

Tags