[Support request] Sticky Header

[Laura]

Hi Team GP! Looking forward to your input again. You have been really helpful.

I have created a Header Element.
Sticky navigation is on.
Use Navigation as Header is DEACTIVATED.

In Customizing Layout > Primary Navigation> Navigation Location is BELOW HEADER
The same goes for Elements> Site Header> Navigation Location> BELOW header

Nonetheless my navigation bar always displays ABOVE the header.
AND the Navigation is sticky, NOT the Header.

My aim is to have navigation bar BELOW the header and for it to be glued to/merged with to the Header, so that they stay sticky as a unified block of content.

I believe there is some kind of conflict in the code because the first time you go to the front page the Navigation Menu displays as grey (the background colour specified for ‘Navigation Background’ in Elements> Header).
HOWEVER if you scroll down on that same page and then scroll back up, the Navigation Background changes to Black (which is the setting in Customize>Colours>primary Navigation.
Could you please advise how to achieve the goal I mention above?

Many thanks!
lbb

[David]

Hi there,

theres a little confusion here between Site Header and Header Element.
To display the Site Title and Tag line above the Navigation you will need to disable the Navigation as Header option.

[Laura]

Hi David, thankyou.

I mentioned that ‘Use Navigation as Header’ is disabled.
So I don’t see any difference between what you have suggested and what i am already doing.
All the in know is it is not working.
The Navigation Location is ‘below the header’ and yet it appears above it.

The GP support documentation suggests I use the Header Element to customize the Header, but if this is not correct then what do you suggest?

[Laura]

Also could you please respond to the issue I brought up that the Navigation Menu is sticky, not the Header?

[David]

The default layout of GP is:

First: Site Header
Second: Navigation ( after header )
Third: Header Element

Which is what i see on your site if i go to the Sample Page.
The Home Page is absent of the Site Header – it is disabled using the Appearance > Elements > Layout Element – which is also setting the full width content area.

Unless we apply some code the Site Header and the Navigation always sit above a Header Element.

Do you need the Header Element ?

In regards to the Sticky Navigation – it only applies to the Navigation, not the site header.
We can make this happen with some code if you want ? Do you have a design of how the logo/branding/nav should look ?

[Laura]

I have enabled Site Header in Appearance and removed the Header element. Thankyou.

So David, why is there no GP documentation on customizing Site Headers?
I added the Header element because when searching documentation on Customizing the Site Header, I was redirected to>> https://docs.generatepress.com/article/header-element-overview/
so I created a Header Element, which as you say is not necessary.

So basically, my original question still has not been resolved.
As stated above, I want my Site Header and navigation to be ‘glued’ together.

The design is to replicate something like: https://www.diffordsguide.com/beer-wine-spirits/596/highland-park-18-year-old

or
https://www.vivino.com/saint-clair-wairau-reserve-sauvignon-blanc/w/1147263?year=2019&price_id=21677824

As there is no documention on customizing the site header, I could not find any info about changing the logo image, position in relation to a byline/heading, (or adding a search bar etc) within Site Header.

Could you please advise?
Many thanks.

[David]

Sorry for the confusion – with hindsight naming the ‘Header Element’ probably wasn’t the best choice to help new users find their way around.

For that type of layout i would suggest the Customizer > Layout > Primary Navigation –> Location is set to Below Header.

This is the Header overview documentation:

https://docs.generatepress.com/article/header-layout-overview/

Logos / Site Title / Tagline are all set for display in the Customizer > Site Identity.

You can then use the Customizer > Widgets > Header to add things like search and social shares to the right of the logo.

Those examples are quite complex – once the elements are in the right area it may require a little CSS. to size and align elements – which we’re happy to assist with.

[Laura]

Hi David, I still have been unable to ‘glue’ the site title to the navigation bar so that when I scroll down, I can continue to see my logo, tagline and primary menu at all times.

So far I fail to see the value of a premium template when the control of the Header is so limited.

Please advise.

[David]

GP Premium provides a separate logo for the Sticky Navigation in Customizer > Layout > Sticky Navigation. This we find is more appropriate for most site designs as sticking the entire site header can eat up a lot of vertical screen space.

However, the theme is built to be flexible, for example – add this PHP Snippet to your site and it will move the header inside of the navigation so they now become sticky.

add_action( 'wp','db_sticky_header_navigation' );
function db_sticky_header_navigation() {
    remove_action( 'generate_header', 'generate_construct_header', 10);
    add_action('generate_inside_navigation', 'generate_construct_header', 10);
} 

We can also hook the title and tag line into the Navigation if needed. Let me know.

[Author]

Posts