Sticky header that stays the same as designed in desktop & mobile.

Hi there,

Can you try this option first?
https://docs.generatepress.com/article/navigation-as-a-header/

Then add the current header widget content using the generate_menu_bar_items hook as instructed in the video here:
https://docs.generatepress.com/article/generate_menu_bar_items/

Hi,

I followed the instructions in the first link.

When I got to the second link it shows me how to add items to the top menu bars by adding a hook.

I just want the existing complete header including the existing text widget, existing bottom border, existing logo, existing menu, existing search icon all in the exact same dimensions & current layout to go sticky in desktop & mobile.

Bonus if all the above go to a 50% transparent black when sticky.

Please advise on solution.

When I got to the second link it shows me how to add items to the top menu bars by adding a hook.

That is the best way. So instead of adding the phone number and open hours in a header widget, can you add it using the hook method as suggested in the article first?

Hi,

I think that I'm not explaining what I want to do right.

To my understanding the top bar does not become sticky, great if it can.

Basically you see how my header is now in mobile & desktop in the sandbox it's the best I could do with GeneratePress and I can live with it. I want exactly what you see in desktop & mobile to become sticky.

I don't want a trimmed down version with a puny itsy bitsy hamburger menu and puny site logo without the text widget and without the bottom border.

I seem to be asking something really, really simple and I have the impression that I have to go to Mars make a detour at Pluto and come back to earth.

If I can get the opening hours and phone number to appear in the top bar and the top bar can become sticky with everything exactly the same as it's now without the text widget great!

Dont you have some stick this complete header CSS thing scheming?

Try this CSS:

.site-header {
    position: sticky;
    top: 0;
}

Hi,

Ouh so that means I can make the top bar sticky with the right class :)

I'm almost excited ;)

I can adapt from a past very regretful life with Elementor that is so bloated, heavy and slow this CSS:

background-color: rgba(0,0,0,0.5)!important
transition: background-color 4s ease !important;

Now the background is 100% transparent when going over headings.

I would appreciate the complete CSS recipe with the top bar as CSS is not really my thing.

Please advise

Hi there,

I'm not seeing a top bar on your sandbox site as of right now - should I be looking at a specific page?

Are you wanting both the top bar and header to become sticky as you scroll down?

Let me know :)

Hi Tom

I just added back the top bar.

Yes both the top bar and the header to become sticky.

I found out how to keep the header background from becoming transparent when going over headings by adding: z-index: 999;

Would it also be possible for both to have a 50% black background only when becoming sticky using the ease transition as above?

By the way I am elated at the performance results of the plugin that vary from 99 to 100 in lighthouse. Great coding & job!

Please advise

You can do this:

.top-bar {
    position: sticky;
    top: 0;
}

.site-header {
    position: sticky;
    z-index: 999;
    top: 35px; /* height of top bar */
}

It's not possible to apply styling to sticky elements using position: sticky, unfortunately. That requires javascript, as a class would have to be added to the elements once they become sticky.

That's where the method Leo mentioned would be better, as our sticky navigation feature adds those classes for you.

Hi,

Thank you.

To my understanding the method Leo mentionned strips away the bottom border. Is that right?

It's all nebulous for me what it implies and how it has to be done.

Please advise

Hi,

I also noticed that there is a 1 pixel area on top that doesn't become black.

Is that the 1 pixel that I saw in the code for text readers?

Please advise.

To my understanding the method Leo mentionned strips away the bottom border. Is that right?

Yes - but we just need to tweak the CSS to display the border again.

Let me know if you decide to go with that method.

Hi,

I followed the directions that you initially gave https://docs.generatepress.com/article/navigation-as-a-header/ what was kind of nebulous is the height that I had to apply for the header to stay exactly the same. There is margin that is applied automatically by the plugin and I wasn't certain that I would get it right.

The whole idea is to avoid Cumulative Layout Shift. I am presently displaying the logo at its exact resolution to avoid any CLS caused by resizing. In a previous life I was using Elementor and recently Oxygen. Both tremendous performance killers Oxygen considerably less. They are both great at introducing crazy amounts of Cumulative Layout Shift. GenerateBlocks + GeneratePress is outstanding in all aspects just to stroke you a bit. It's totally true though and the support is above and beyond.

In the second part https://docs.generatepress.com/article/generate_menu_bar_items/ It was just showing me how to put stuff in the top bar that I didn't have at the time. It now makes sense since I am now using the top bar instead of a text widget inside the header.

I am ready to try it again if I can get the bottom border back in. The sizing thing makes me uncertain that I will get it right to avoid CLS. What is the right way to do it essentially?

Also, if it introduces JS that hinders performance, I will avoid it and keep the KISS route Keep It Simple Stupid.

Please advise

Sorry I'm a little bit confused.

I'm not seeing the navigation as a header method being implemented currently and the generate_menu_bar_items method isn't for top bar either.

Is your current layout what you wanted? Sticky top bar plus the header?