[Resolved] Sticky background issue on top and bottom of the pages

[François]

Hi,

I’ve put a gradient background on the sticky nav. Unfortunately, its design change on page load and when the visitor reach the top and the bottom of the page. During the scroll of the page, the sticky Nav looks exactly how i expect. Any clue ?

Thanks,
Cisco

[Leo]

Hi there,

We will need to see the issue live to help.

Can you duplicate the problem on a live server?

Thanks 🙂

[François]

Hi Leo, thanks for your help, i’ll come back to you as soon as it is on a live server, thanks !

[Leo]

Sounds good 🙂

[François]

Hi Leo,

Hope everything is fine there !
How can i provide you the admin access to check my issue ? I can’t see any specific field…

[David]

Hi there,

you can edit your original topic and use the Site URL field to share the URL privately.
Do we need a login to see the site ? If so you can provide a temporary login in the forum as its useless without the URL which only we can see.

[François]

Hi David,

Thanks, i’ve added the site url, there are your credentials:

user:gpsupport
pwd: th4nks2GPSupportT3am!

Merci !

[David]

Ok so we got the login – can you explain a little more or provide a screenshot of the actual problem ? I am having trouble seeing it – let me know.

[François]

Hi David,
Thanks to come back to me.
This is the issue.
On the front page, everything work beautifully because the hero and the nav are coordinated as expected. But when you navigate on other pages (without the hero), the nav don’t display the gradient anymore, it show the previous color i’ve defined (the violet one). When i try to update it with the gradient, it also update the one on the front page that lose the transparency… i hope you understand.

Thanks,
Cisco

[François]

oh..i’ve forgot to tell you, it happends when, on scrolling, the user reach the top and the bottom of the page.

[David]

Aah ok – you need some CSS that only applies to pages that do not have the merged transparent site header.

When the merged header is enabled the navigation gets placed inside a header-wrap.
When there is no merged header the navigation is in the body

So we can target a the main-navigation when it is a direct descendent of the body like so:

body > .main-navigation, body > .main-navigation ul ul {
    background: linear-gradient(135deg, rgb(86, 49, 122) 0%, rgb(61, 153, 190) 51%, rgb(58, 181, 176) 100%)!important;
}

[François]

Woa…ok that’s clever ! and it works perfectly, thank you so much David.
Take care of you all,

Cisco

[David]

You’re welcome ! You too !

[Author]

Posts