Static header on certain pages or all pages

[fxground]

Hello,

I’m trying to figure out how to have a static header (one where you can always see the header at the top of the page no matter how far you scroll down) in two ways so I can try it out:

1. Having a header stay static on a certain page:
   Tried this but no dice. 4972 is my page id.
   .page-id-4972 .x-masthead { position: static; }

2. If I wanted all pages EXCEPT for the main page to have a static header … how could I accomplish this?

Thanks!

[rad]

Hi @fxground,

Thanks for reaching out.

1. That’s not static but fixed positioning, the CSS should be

.page-id-4972 .masthead { 
position: fixed; 
width: 100%;
}

2. It could be like this

body:not(.home) .masthead { 
position: fixed; 
width: 100%;
}

Hope this helps.

[fxground]

Hello, sorry I couldn’t get these working when i put them in my css. I’ll send you the link, wondering if its something different or is something preventing me?

[lely]

Hi @fxground,

I can see you are using PRO. No need to use custom CSS. Edit your Header. Inspect the BAR. Then set Sticky Bar to ON
It will make that bar fixed when you scroll.

@fxground

1. Having a header stay static on a certain page:

You need 2 header. Duplicate your current header. On the first header which is set to this specific page, set STICKY BAR to ON. Then the other header which is set as global, set STICKY BAR to OFF

@fxground

2. If I wanted all pages EXCEPT for the main page to have a static header … how could I accomplish this?

Same approach. You need 2 headers. The header with sticky bar set to ON should be assigned as GLOBAL header. On the other hand, the other header where sticker bar is OFF should be assigned to main page.

Hope this helps.