Sticky Navigation

  • gerald.reisner

    (@geraldreisner)


    6 years, 8 months ago

    How can i make the navigation 100% sticky/fixed. Right now, when you scroll down, the header/navigation disappears, and while scrolling down the page it comes back again. I want it to be visible all the time. Thank you!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Jarret

    (@jarretc)

    6 years, 8 months ago

    Hello, did you get this working? When viewing your site and scrolling down the navigation menu remains showing at the top of the page.

    Thread Starter gerald.reisner

    (@geraldreisner)

    6 years, 8 months ago

    No, this ist the usual behaviour: when scrolling down it disappears and when reaching the 2nd Panel it shows up again. I want the navigation to be visible all the time.

    KokkieH

    (@kokkieh)

    6 years, 8 months ago

    Hi there,

    This code should do it:

    .header-top {
  position: fixed;
}
.site-header-fixed.header-top {
  animation: none;
  transition: none;
}

    It sets the original header as sticky, and blocks the animation effect.

    Thread Starter gerald.reisner

    (@geraldreisner)

    6 years, 8 months ago

    no, too bad, this one breakes the responsive navigation…

    KokkieH

    (@kokkieh)

    6 years, 7 months ago

    Try this instead:

    @media screen and ( min-width: 60em ) {
  .header-top {
    position: fixed;
  }
  .site-header-fixed.header-top {
    animation: none;
    transition: none;
  }
}
    Thread Starter gerald.reisner

    (@geraldreisner)

    6 years, 7 months ago

    Hi, thak you, now it works!

    KokkieH

    (@kokkieh)

    6 years, 7 months ago

    Glad I could help 🙂

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

The topic ‘Sticky Navigation’ is closed to new replies.