Archived topic
Customizing header and navigation
7 replies · Started by Christophe on June 22, 2020
Hi,
I'm trying to customize the header in this way:
On all pages except for the frontpage: use navigation as header and have it sticky --> OK using PHP snippet
I'd like the full menu only to be visible in the non-sticky header on the frontpage. In the sticky header I'd like the logo to be aligned to the lift and an icon that triggers an elementor popup aligned to the right.
I've been going through the documentation to find filters and hooks which could help me achieve this but without any luck.
Could you please guide me in the right direction?
Thanks
Hi there,
whats the purpose of the Elementor pop up?
Knowing may help with choosing what the best solution is.
Hi David,
It's a full screen popup that shows site navigation and some more information.
I've tries to use the off-canvas for that, but it's not exactly what I'm trying to achieve with regards to styling etc, so I thought building an elementor popup would be the best way but I'm open for alternatives :-)
Do you have an example of what the 'pop up' will look like ?
I'm still working on it but I have quickly added an icon that triggers the popup on the frontpage, between the logo and the menu.
So in fact the goal is to only have that icon when navigation is sticky
You can add whatever markup or element shortcode you need for your pop up trigger to the inside_navigation hook using the hook element:
https://docs.generatepress.com/article/hooks-element-overview/
It will require a little CSS to hide it on static nav and position it on sticky nav - which i can help with once its in place.
That's what I did but it's only showing on the frontpage in the static nav for the moment.
Your CSS for color and animations style is targeting #site-navigation .openmenu which is only applicable to the static navigation. Use .main-navigation .openmenu instead
