How can I underlay the sticky navigation with white Background?

Hi there,

the Sticky Navigation will use the Colors you set in Customizer > Colors > Primary Navigation - so you can add a background color there.

Then in your Header Element - edit the Header and Navigation colors ( on Site Header tab ) - and set them to transparent.

Thank you that worked :) but now I have got a white "Underlay" under my Navigation-Icon. Is there a solution to set this transparent without setting the sticking-header transparent?
https://ibb.co/yXR1qbk

Then I have got an second question. I use the generate-blocks; But on iPad (iPad Pro 12,9" & old iPad 9,7") the background picture isn't shown perfectly. (look at the attachment). Have you got an idea how to fix this, too?
https://ibb.co/p2RDN1X

Hi Jenny,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

shure :)
I will also give rights to you if you want to show it up in the backend.

Hi Jenny,

Thank you that worked 🙂 but now I have got a white “Underlay” under my Navigation-Icon. Is there a solution to set this transparent without setting the sticking-header transparent?

We can do that with custom CSS:

nav#site-navigation.main-navigation {
    background-color: unset;
}

Then I have got an second question. I use the generate-blocks; But on iPad (iPad Pro 12,9″ & old iPad 9,7″) the background picture isn’t shown perfectly. (look at the attachment). Have you got an idea how to fix this, too?

Is the same issue occurring on the back end when you edit it?

Can you try regenerating GenerateBlock's CSS and see if it still occurs?

Let us know.

Thanks a lot :) I am complete new here. What do you mean with:

an you try regenerating GenerateBlock’s CSS and see if it still occurs?
How can I do this?

Hi there,

Most mobile devices do not support fixed backgrounds as they require a lot of processing power which in turn eats the battery. So they just default to a scrolling background, but iOS has a bug that messes up the sizing.

In most cases we can use some CSS to remove the fixed background - but thats not really going to work with your design.

So lets try this ( not 100% sure ):

1. select the Container Block that has the background image - in the Advanced > Additional CSS Class(es) field add: fixed-background

2. Then add this CSS to your site:

@media (pointer: coarse) {
    .fixed-background.gb-container:before {
        background-attachment: inital !important;
        position: fixed;
    }
}

If that works - you will also need to add a white background to the other container blocks on the page - or the image will show behind them.

No - that doesn't work. I have just a new problem. But it doesn't matter. Less of 5% of users visit my old page via tablet. :) & my landing pages won't have a Scrollpicture.

Thanks for your help.

Yeah - i wish Apple would fix the issue - its been around for years now :(

Glad we could be of some help

Thanks a lot ❤️ great support!