Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Transparent sticky header to become solid color when scrolling down

Home Forums Support Transparent sticky header to become solid color when scrolling down

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #359465
    Günther

    Hello,

    (i just bought the GP theme and am excited about it :))

    there was another thread about the problem stated in the subject but I couldn’t reproduce the solution:

    I have a transparent header (via “merge header”) on the page.

    When I scroll down I want the (sticky) header to get a solid color (white for instance), so you can read the navigation.

    I tried playing around with “sticky navigation” in the customization, but this did not change any behaviour – the sticky header remained transparent.

    How can I solve this?

    Thanks!

    #359471
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try this CSS?

    .main-navigation.navigation-stick {
        background-color: #ffffff;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    If this doesn’t work are you able to provide a link to your site? Thanks!

    #359829
    Günther

    Yes that worked, thanks! (btw I had to move away from “merge header”, that messed everything up, I just set the color of the header to transparent.

    Now one more problem: the logo in the header “disappears” – this should also remain sticky like the navigation – how would I go about that?

    #359830
    Leo
    Staff
    Customer Support
    #359886
    Günther

    Ok nearly there :)) – now the logo is also in the sticky, and in the sticky it is where it should be (to the left of the screen), but in primary navigation the logo is not to the left of the screen but right next to the left edge of the text of the navigation.

    So when the menu switches from “primary” to “sticky” the logo jumps round from left to right.

    How can I make the logo appear in the same position as it does in the sticky menu?

    #359907
    Leo
    Staff
    Customer Support
    #359925
    Günther

    It’s already on contained.

    I inspected the html during scrolling, and here’s where a difference popped up in the element with “id”:
    sticky-placeholder

    style attribute of id above with sticky:
    visibility: hidden; float: right; display: block; width: auto !important;width:auto !important

    style attribute of id above with primary nav header:
    visibility: hidden; float: right; display: none; width: auto !important;

    the difference is display: block vs disply: none ->
    so I would have to get the normal header (non sticky) to also do display: block I guess?

    How can I achieve that?

    #359927
    Leo
    Staff
    Customer Support

    Can you link me to the page?

    #360092
    Günther

    Can I pm you the link?

    #360169
    Leo
    Staff
    Customer Support

    Yup you can send it through Account Issue: https://generatepress.com/contact/

    Just mention the topic.

    Thanks!

    #360221
    Günther

    ok thanks!

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