[Support request] Background behind nav

[Marcus]

First of all props on an awesome theme and awesome support! So happy I found Generatepress, keep up the good work.

My site is here:

I have the nav looking almost how I want it, its slightly transparent, but as I scroll suddenly another lighter background appears behind it, then disappears as I continue scrolling.

This results in the nav briefly “flashing” as you scroll down the page, which doesn’t look good.

I’ve tried adding some css to change the colour of that background to #525265, but nothing seems to take effect:

[Tom]

That is super strange – it looks like it’s being caused by the sticky navigation placeholder which holds the place of the navigation when it becomes stuck to prevent jumping.

For now, you can change the sticky transition and I’ll find a solution ASAP.

[Tom]

This is a tough one.

The white bar is actually your body background color, as your purple section starts below the navigation.

One solution be to set your body background to #23234a for that page. However then you would have to set your other white sections on the page to white as they currently inherit the white body background.

[dasigna]

giving the sticky-placeholder a negative (top) margin of -40px works also – at least temporarily as quick fix without touching anything else… 🙂 (but you’ll have the ‘jump’ then…)

[Tom]

Yea, you could remove the sticky placeholder completely:

#sticky-placeholder {
    display: none;
}

However that will result in a jump when your navigation becomes sticky.

[Author]

Posts