Hi dear support team.
Anyone here to help me. What does it take to create a header like https://www.rolex.com/
It must be transparent from start, disappear at scroll down and become visible in white again at scroll up. It should work on both mobile, tabled, laptop and desktop versions on this site: https://scalpinnovation.dk/
Really hope you are so talented that you can make it happen !!
:) Best regards Carsten
Hey Carsten,
Thank you for the inquiry.
To create a burger menu, you can start by setting Enfold > Header > Menu and Logo Position to Logo right, menu left. Set the Main Menu > General > Menu Items for Desktop to display as icon instead of text. This will convert the main or default menu to a burger menu.
For the menu items beside the icon or burger menu, use the theme’s secondary menu. You can add a few css to adjust its position until it sits beside the main menu. And add a few more css to center align the logo.
To create the icons located at the far right of the logo, try to add a widget in the header area. Please check the documentation for more info.
// https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
Best regards,
Ismael
Hi Ismael.
Thanks for your reply.
I think you have misunderstand. If you read my text, I was asking for a header like Rolex.com
That means a header with a burger menu, transparent, and fade up when scrolling down.
Visible, fade down again in white when scrolling up.
Br Carsten
Hi,
transparent, and fade up when scrolling down.
Thank you for the clarification. If that’s all you want, then you can set the page’s Layout > Header visibility and transparency settings to the second option (Transparent Header). The header will be transparent on initial load and the background will only start to fadein on page scroll.
Best regards,
Ismael