How to make a sticky sidebar or header?

  • Hasan

    (@hasanaytac)


    2 years ago

    Hello, there should be a good explanation for the sticky sidebar and header, which is important in the internet world. You should create content on these topics. How can we do that ?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Alvaro Gómez

    (@mrfoxtalbot)

    Hi, @hasanaytac. That is a great question!

    If you are familiar with CSS, you could make your menu sticky by adding the following code:

    body {
  padding-top:140px
}

header {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-color:#ddd;
  height:120px
}

    To access the CSS editor in the Customizer when using FSE you’ll need to add this after your URL: /wp-admin/customize.php. You will also need to adjust the height and padding-top values to match the content of your header.

    If you are not familiar with CSS, you can try a plugin. There are a few plugins that will allow you to “fix” your header and other website elements:

    https://www.ads-software.com/plugins/search/sticky+menu/

    I hope that helps!

    Alvaro Gómez

    (@mrfoxtalbot)

    Hi again, @hasanaytac. I was doing a few tests and, due to the fact that Twenty-Twenty-Two does not have any actual widgets, creating a sticky sidebar/widget cane be a bit of a challenge, even if you use a plugin.

    If sticky widgets are an essential part of your design, you might want to consider trying an alternative, “classic theme”.

    Alvaro, Thanks,

    that IS the best easiest solution to use Gutenberg 2022 or 2023 Themes and to add a fixed(sticky) main menu, just make the whole header stickyish, Except; I used an inset of 32px for 2023 theme and for 2022 Theme I used -50px 0 0 0 and I used a height:45px for 2023 and 115px for 2022 Theme.

    Moderator Kathryn Presner

    (@zoonini)

    @edwardjs Glad this thread was useful for you.

    The next version of WordPress (6.2) will support some sticky elements, so creating a sticky header should become simpler very soon. ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to make a sticky sidebar or header?’ is closed to new replies.