transparent header that turns into second sticky header on scroll down

[Simon]

Hi there

I’m looking to make a header similar to the one on this page

https://www.cloudways.com/en/features.php

So my main header is transparent and then I have a second sticky header that shows after you scroll down a bit.

GeneratePress 1.3.46

GP Premium 1.2.96

[Leo]

Hi Simon,

These couple articles should help:
https://docs.generatepress.com/article/merging-the-page-header-site-header/
https://docs.generatepress.com/article/sticky-navigation/

Let me know if this is what you are after.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Simon]

Hi Leo

Yes I have managed to merge the header with the page header. So now the header is on top of a background image that also is behind the content area like the link I shared with you which I’m trying to recreate. Here it is again for reference.

https://www.cloudways.com/en/features.php

So now I also have the navigation is sticky but how do I also add the website logo to the sticky navigation? Basically I want the entire header to be sticky, not just the navigation.

[Tom]

Have you added a navigation logo?: https://docs.generatepress.com/article/navigation-logo/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Simon]

Hey Tom

Right, I didn’t see ‘navigation logo’ option, thank you.

The last two things I’m trying to achieve to make this sticky header perfect is…

1) to make the header full width. My layout isn’t boxed so the boxed menu looks bad. Trying to figure out the CSS for this. Will let you know if I figure it out soon.

2) less important but would be great, is to show this sticky menu only when the user decides to scroll up. I’m hoping to find some JS that will help me accomplish this. Again will let you know if I figure this out.

[Simon]

1) the full width header CSS was easy to figure out

#sticky-navigation {
max-width:100%!important;
}

2) the hiding the #sticky-navigation and showing it only on scroll up is more difficult. I could the code myself (there are plenty of examples on stackoverflow etc) but changing existing code is always a lot harder. Any help would be appreciated.

[Tom]

That’s something I’m working on for a future update – it’s actually quite complicated as you need to use JS to detect when the user is scrolling up/down.

I have it mostly built already, but there’s a few bugs I need to fix before releasing it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Simon]

Hi Tom

Yes I saw that you need to use JS to detect when the user is scrolling up and you don’t want it to detect if the user has scrolled up just one pixel as that can be quite taxing on the system.

I’m glad you’re working on this. It seems with a very simple layout it’s relatively easy to do. But with a more complex layout that I haven’t created personally and don’t have all the source files too it’s a little harder 🙂

I look forward to the day you release this feature.

Thank you for your help and time and wish you all the best.

[Tom]

No problem! I’ll hopefully have it all working perfectly soon 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Megan]

Hi!

I am just wondering if there has been this update added to the theme? I purchased the GP premium and am utilizing it with eliminator pro. I am trying to create a header and then sticky header as example https://www.invisionapp.com/. I am pretty new at coding and working in WordPress, so I apologize in advance if these questions are super basic.

I have accomplished the transparent header, and then the sticky header which is with a black background. Also from this thread, I have made it the entire screen.

QUESTIONS:

1) Does the premium theme have the ability to have the very top bar as in the example on https://www.invisionapp.com/ that states “work for a large company”– and a button in that top bar.

2) Can I change the background of the sticky header so that it isn’t black?

3) How can I style the nav links and add a button in the links as in the example? How can I make this stay for the sticky header? I can’t seem to find any documentation on how to style that section through this website.

Thank you so much in advance. Any help that you can provide me would be amazing. I really appreciate it.

[Tom]

Hi there,

1. The theme doesn’t have this by default, but it could be built. There’s also a plugin that does something very similar: https://en-ca.wordpress.org/plugins/wordpress-notification-bar/

2. The sticky navigation will take on your primary navigation colors (Customize > Colors > Primary Navigation). Do you need it to be different?

3. You can add a button to the menu like this: https://generatepress.com/forums/topic/targeting-a-single-navigation-menu-item-to-create-a-button/page/2/#post-268607

If you need more info, feel free to start a new topic and link to what you have so far 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[B]

Hi,

I’m trying to create a header and sticky navigation similar to this site: goo.gl/21LNmE.

In particular, the logo appears only in the navigation bar and is larger than the height of the nav bar itself (with a drop shadow to make it appear like the logo is hovering above the page). Please advise whether / how I can do this with GP.

I’ve followed the instructions above, which has got me most of the way there. To get the logo to the required size, I’ve set the Menu Item Height to the max (150px) for desktop and smaller for mobile. However, ideally I’d like to make the following changes:
1. in desktop view, to have the logo larger / higher than than the height of the navigation bar and with a drop shadow (as in the above site).
2. I’d also like to make the logo larger in mobile view, but if I do so, this makes the height of the menu items too large when I click on the drop down menu. Is there a way to specify the size / height of the logo & menu item height separately?

Many thanks!

[B]

P.S. I’d also like to have one of the menu items appear like a button. I’ve included the CSS you gave in a previous post:
https://generatepress.com/forums/topic/targeting-a-single-navigation-menu-item-to-create-a-button/page/2/#post-268607

… but this doesn’t really appear as a button given that I’ve set the Menu Item Height to the max. Please advise how to amend the CSS so the border of the button hugs the text more closely (vs filling the whole height of the menu item).

Many thanks! Really appreciate your support.

[Leo]

Hi there,

Can you open a new topic for your questions and provide link to your site if possible? Thanks very much 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts