How to make Header sticky

  • Resolved freudianslit

    (@freudianslit)


    1 year ago

    Hi, I cannot find anywhere in the forums or elsewhere information on how to make the header sticky with the twentig theme.

    I can only find old instructions referring to css.

    Thanks in advance.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Yann

    (@collet)

    Hi,

    The easiest way to stick your header throughout your entire website is to add the following custom CSS in the Additional CSS box:

    header.wp-block-template-part {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0);
z-index: 10;
}

    There is a quick tutorial here in the “Tutorials for the WordPress Twenty Twenty-Four theme” section, that explains how to add custom CSS to the Twenty Twenty-Four theme.

    Have a nice day,
    Yann

    Thread Starter freudianslit

    (@freudianslit)

    Thank you! I thought there was a hidden option somewhere.

    Plugin Support Yann

    (@collet)

    You’re welcome! This is the easiest and most straightforward solution. Alternatively, you could wrap the header with a Group block and make the group sticky. But this would require editing each template, which is a bit of a hassle.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to make Header sticky’ is closed to new replies.