[Resolved] Fixed header that follows when you scroll

[Marcus]

Hi,

I need to put a industry disclaimer in the header that is fixed and follows when you scroll. I need this to be compliant for the industry.

How can I make this happen and where should I put the text?

See example in private info.

Best, M

[David]

Hi there,

1. Create a new Block Element:

https://docs.generatepress.com/article/block-element-overview/

We recommend using the GenerateBlocks plugin in the editor – you can use it to add a Container Block and Headline Block to set you styles in the editor:

https://generateblocks.com

2. Once you added your disclaimer text and styled the colors etc. select the parent Container Block and in Block Settings > Advanced -> Additional CSS Class(es) add: sticky-disclaimer

3. Set the Display Rules of the Block Element to Entire Site and Publish it.

4. Now add this CSS to your Site:

.sticky-disclaimer {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

[Marcus]

Hi David,

Thank you for your quick reply.

I rather not install an other plugin.

Is there no way that I can use the top bar and just make it sticky with some additional css?

I am satisfied how it looks right now, I just want the top bar to follow when I scroll.

See website in private info.

[David]

Just change:

.sticky-disclaimer {

to:

.top-bar {

[Marcus]

Thank you David.

I have added the code in additional css and changed it to .top-bar but it doesn’t seam to work anyway.

See prints in private info.

[David]

Aah – the CSS needs some z-index:

.top-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

[Marcus]

Awesome, thank you very much.

Is there a way to minimize the disclaimer bar in responsive devices?
See example in private info.

And also, can the nav bar also be sticky and follow below the top bar?

[Ying]

Hi Marcus,

To make the nav sticky, try this CSS:

nav#sticky-navigation {
    top: 58px !important;
}

Is there a way to minimize the disclaimer bar in responsive devices?

Yes, we can adjust the sticky position of the top bar, but since mobile devices have different widths, top bar will be different height. It’s easy to only hide part of top bar when scroll, but it’s very difficult to set a right sticky position for the sticky navigation.

Currently your sticky mobile navigation is hidden under the top bar, if you don’t need mobile sticky navigation then disable it, then you could try this CSS:

@media (max-width: 768px) {
    .top-bar {
        top: -20% 
    }
}

[Marcus]

Hi Ying,

Thank you very much!

It seams to be working fine now in desktop view.

I disabled the sticky nav on mobile devices and then it works.

The top bar covers parts of the sticky nav in tablet mode though, is there a way to disable this as well?

Best, Marcus

[Ying]

Could give this a try:

@media (min-width: 769px) and (max-width: 1088px) {
    nav#sticky-navigation {
        top: 77px !important;
    }
}

[Marcus]

Wow, it looks perfect. Thank you very much for your help!

Also, is it possible to disable the side bar on tablet and mobile devices?
See print in private info.

/ Marcus

[Ying]

This should be useful 🙂
https://generatepress.com/forums/topic/how-to-disable-the-sidebar-on-mobile/#post-1312250

[Marcus]

Thank you David and Ying for your great help!

/Marcus

[Ying]

You are welcome 🙂

[thetam]

This css works perfectly when i scroll down, but not work when i scroll up, can you help me David

[Author]

Posts