-
Posts
-
Hello,
I like to have a special behaviour of the menu and logo area.
At loading:
-menu bar is at content width with specific background color;
– a page image goes behind the logo area and left/right of menu area;
When scrolling:
– menu bar goes full page widht;
– logo background is white.Any idea how to reach this goal?
It’s similar to eg. https://hospiceborne.nl/
Hey HenkN,
Thank you for the inquiry.
To achieve the desired layout and styling for your header, please follow these steps:
1.) Set the Enfold > Header > Header Layout > Menu And Logo Position option to Logo center, menu below. This will position the menu below the logo.
2.) Add the following CSS code to apply a background color to the menu container:
.html_header_top.html_bottom_nav_header #header_main_alternate .main_menu>div, .html_header_top.html_bottom_nav_header #header_main_alternate .main_menu ul:first-child { background-color: red; }This code targets the specific elements within the header and applies a red background color. You can customize the color as needed.
3.) Create a page and switch to the Advanced Layout Builder. Add a Color Section, Slider, or any full-width elements that can display images at the very top of the page. Customize the content within these elements according to your requirements.
4.) Finally, set the Layout > Header visibility and transparency option to Transparent Header. This will make the header appear transparent, allowing the content of the page to show through.
By following these steps, you should be able to achieve the desired layout and styling for your header.
If you have any further questions or need additional assistance, feel free to ask.
Best regards,
IsmaelYes, that’s what I wanted. It need some customization, because I see some horinzontal lines, but you pointed me in the right direction.
Thank’s a lot.
- You must be logged in to reply to this topic.