[Resolved] Sticky header – shrink and transparent?

[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!

[David]

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.

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

[Leo]

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

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

[Leo]

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 🙂

[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”

[Leo]

Edited the code here:
https://generatepress.com/forums/topic/sticky-header-shrink-and-transparent/#post-1060997

Give it another shot 🙂

[Leo]

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 🙂

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

[Leo]

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

[Stefan]

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

[Leo]

No problem 🙂

[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

[David]

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.

[Author]

Posts