[Resolved] Sticky header – shrink and transparent?

Home Forums Support Sticky header – shrink and transparent?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1060733
    Stefan

    Hi,

    I would like to make the sticky header shrink a bit when I scroll down and a bit of a transparent effect would also be great (no full transparency, just a bit). Is there a css code that I can add for this?

    Thanks!

    #1060751
    David
    Staff
    Customer Support

    Hi there,

    you can reduce the Menu Item Height in Customizer > Layout > Sticky Navigation this will make it shrink on scroll.

    Then this CSS to make it transparent:

    .sticky-enabled .main-navigation.is_stuck {
    	background-color: rgba(255,255,255,0.9);
    }

    Adjust the RBGA color to match your navigation color and change the 0.9 to reduce/increase the opacity.

    #1060781
    Stefan

    Thank you David! The support you guys offer here is really great. Worked perfectly!

    I think, I have found a bug in the theme. When resized the window from desktop to mobile, the logo goes to the center before getting into the mobile mode. This happens when I set the mobile breakpoint to <755. at 768 everything is fine. you can check it out here: https://test2.language-software-review.com

    – is there a way to make the mobile logo shrink so when viewing it on a phone that the hamburger and search symbol don’t go into a separate line? makes the header unnecessarily thick.

    – is it possible to change the padding of the first item in the secondary navigation (Level 1)? I want the first items to be in line with the primary navigation item.
    It is possible to correct this with the menu items width but then the menu items are too far apart.

    #1060842
    Leo
    Staff
    Customer Support

    Hi there,

    – The issue with the logo centering, have you changed the breakpoint settings here?
    https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

    – Try this CSS:

    .site-logo.mobile-header-logo img {
        height: 35px;
        padding: 7px 0;
    }

    – Try this CSS:

    @media (min-width: 700px) {
        .secondary-navigation .main-nav ul li:first-child a {
            padding-left: 20px;
        }
    }
    #1060979
    Stefan

    Thank you Leo, the CSS you provided works perfectly!

    about the logo centering: If I set it to anything above 768px then this won’t happen. Any value below this and it will happen. I have set it now to 700px so you can see the issue which is strange. I prefer having less breakpoint so the mobile navigation is only shown where needed.

    I think this must have something to do with the content container breakpoint which is maybe set to 768px for the content.(only guessing)

    The browser is switching to the mobile content version before reaching the 700px breakpoint that I have set in GP. (centered logo and second navigation out of alignment)
    only when he reaches 700px he will show the mobile menu bar.

    #1060997
    Leo
    Staff
    Customer Support

    Hmm we will take a look at that issue.

    Can you try this CSS in the meantime?

    @media (max-width: 768px) {
        .site-header {
            text-align: left;
        }
    }

    I’ll provide an update once we take a closer look 🙂

    #1061010
    Stefan

    The CSS code doesn’t work, but this is no problem – I will wait for a real solution. Please let me know if you need anything.

    @media (max-width: 768px)
        .site-header {
            text-align: left;
        }

    there is an issue with “.site-header” where he says “Expected LBRACE”

    #1061019
    Leo
    Staff
    Customer Support
    #1061051
    Leo
    Staff
    Customer Support

    Following up on this. We think the current logic works for most users so won’t be making any changes for now.

    Your case is definitely a bit special but my CSS above should fix it 🙂

    #1061103
    Stefan

    what am I doing different to others? maybe I can choose a different way so I don’t need so many CSS fixes 🙂

    The code above worked for the header but the items of the secondary navigation bar still go out of alignment during the period where the content goes into mobile mode. Only when the mobile navigation bar shows up, the secondary nav is aligned again.

    #1061134
    Leo
    Staff
    Customer Support

    The CSS fix is fine as long as you are happy with it.

    I’ve adjusted the code for the secondary navigation padding here so it should stay until the mobile header kicks in:
    https://generatepress.com/forums/topic/sticky-header-shrink-and-transparent/#post-1060842

    #1062342
    Stefan

    wow, you are quick! 🙂 thank you Leo, I highly appreciate your help!

    #1062358
    Leo
    Staff
    Customer Support
    #1283767
    Matthias

    follow up question to Davids answer: https://generatepress.com/forums/topic/sticky-header-shrink-and-transparent/#post-1060751

    /*.sticky-enabled .main-navigation.is_stuck {
    	background-color: rgba(255,255,255,0.95);
    }

    Is this different from
    Customize-> colors -> primary ->navigation
    And entering the rgba color (with opacity smaller 1) there in background

    +
    Customize->layout-> Sticky-navigation
    enabled

    #1283886
    David
    Staff
    Customer Support

    Hi there,

    The Sticky Navigation uses the colors you set in the Customizer > Colors > Primary Navigation.

    But that CSS will apply only to the Sticky Navigation – you would use that if you want sticky to be different to the static menu.

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