Archived topic

Sticky background issue on top and bottom of the pages

12 replies · Started by François on March 9, 2020

Viewing posts 1–13 of 13

March 9, 2020 at 6:57 am #1189706

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

March 9, 2020 at 8:02 am #1189777

Hi there,

We will need to see the issue live to help.

Can you duplicate the problem on a live server?

Thanks :)

March 10, 2020 at 3:30 am #1190557

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

March 10, 2020 at 8:31 am #1191030

Sounds good :)

March 13, 2020 at 3:02 am #1193576

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...

March 13, 2020 at 8:10 am #1193959

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.

March 13, 2020 at 8:42 am #1193994

Hi David,

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

user:gpsupport
pwd: th4nks2GPSupportT3am!

Merci !

March 13, 2020 at 5:05 pm #1194248

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.

March 16, 2020 at 6:33 am #1196246

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

March 16, 2020 at 6:34 am #1196249

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

March 16, 2020 at 7:02 am #1196435

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;
}

March 16, 2020 at 7:25 am #1196457

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

Cisco

March 16, 2020 at 7:43 am #1196468

You're welcome ! You too !

This archived topic is closed to new replies.

Start building better websites today.