Transparent background header OVER page section background images

[Lobsterass]

Hi!

I’ve watched the demo video on making a transparent navigation over a hero image in a second header bar. I want it to look like that. But I need the hero image to be different on all pages so it needs to be the first section of each page, like this Pro site.

My navigation pushes down the section and it doesn’t help to remove section top padding. How do I place the transparent navigation OVER the section image here https://dev.zelk.co.loopiadns.com/ ?

[prakash_s]

Hello @Lobsterass,

Thanks for writing to us.

I checked your site URL, and it seems that you have set the Header Bar as Sticky but the Position is Relative. I would suggest you please the Header Bar Position as Absolute to get the Header Bar over the section background. Please have a look at the given screenshot below.

If it doesn’t work for you, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[Lobsterass]

Ah! Perfect! Thanks! <3

[Lobsterass]

Is there a way to target the logo and the hamburger menu with CSS or something only in sticky menu? I would like to make them 65% size on scroll.

[prakash_s]

Hello @Lobsterass,

You can target it by using the Header bar scroll class, you can use the scroll class and add custom style according to that CSS class.

On scroll CSS selector for the styling .x-bar.x-bar-is-sticky.x-bar-fixed

Let’s take an example of the Image element for the logo that you have used. Using the scroll CSS selector you can add a custom element style, you need to go to Image Element —>Customize—>Element CSS.

.x-bar.x-bar-is-sticky.x-bar-fixed $el.x-image {
    width: 10vw;
}

You can follow the same process for the elements as well. Please feel free to change the width as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks