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

Home Forums Support Sticky background issue on top and bottom of the pages

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1189706
    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

    #1189777
    Leo
    Staff
    Customer Support

    Hi there,

    We will need to see the issue live to help.

    Can you duplicate the problem on a live server?

    Thanks ­čÖé

    #1190557
    Fran├žois

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

    #1191030
    Leo
    Staff
    Customer Support
    #1193576
    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…

    #1193959
    David
    Staff
    Customer Support

    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.

    #1193994
    Fran├žois

    Hi David,

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

    user:gpsupport
    pwd: th4nks2GPSupportT3am!

    Merci !

    #1194248
    David
    Staff
    Customer Support

    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.

    #1196246
    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

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

    #1196435
    David
    Staff
    Customer Support

    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;
    }
    #1196457
    Fran├žois

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

    Cisco

    #1196468
    David
    Staff
    Customer Support

    You’re welcome ! You too !

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.