[Resolved] sticky navigation after header

[Jacob]

I can’t manage sticky navigation after header
I want the main menu to remain generatepress
header is built in elementor
What I did is:
I built the header in Elementor and saved it as a template
After that I copied the short code
And I put it in Hook
In the settings I put Hook
wp_head
Execute Shortcodes
So far, it seems to me that I did the right thing..
Both the menu and the header are sticky
Only when scrolling down, the menu appears above the header instead of below
Many thanks to the helpers to fix it

[David]

Hi there,

can you share a link to where i can see this ?

[Jacob]

.

[David]

Are you wanting the elementor header to be sticky too ?
As that causes a problem.

[Jacob]

Yes they are both sticky
But the menu will be under the header

[David]

The problem with this: if you reduce the width of your browser. You will see that your Elementor header resizes and the height changes. Which means the position of the sticky navigation would need to change, and for that i do not have a soluton as it would require Javascript to recalc it – which isn’t good.

You may want to reconsider the sticky header, as this is another issue:

That image is from a screen preview taken from one of the most common size laptop screens ( 1366 x 768px ) – and that header and nav is taking up around 1/3rd of the viewport… and that without any Operating System UI in there. It doesn’t leave a lot of screen space for those users.

[Jacob]

I can remove the generatepress menu and use Elementor as the menu
Which I don’t want to be
I want to stick with the generatepress menu
Regarding mobiles and tablets, this is no longer a problem because it will be different from the desktop

[Jacob]

If it requires me to work on it longer
So it’s a waste of time. Really maybe to build the menu in Elementor and that’s it

[David]

If you need to use Elementor for the header, then i would suggest you including the Navigation within Elementor.

[Author]

Posts