[Support request] Fixed Header like truelook.com

[wo]

I think I read everything here and still don’t get it: how to achieve a navi / top bar like truelook.com ?

I managed to style the basics, Logo left, Navi right and the Top Bar appearing / disappearing.

Customizer > Layout > Sticky Navigation is OFF.

Added to my Simple CSS

.site-header {
     position: fixed;
     width: 100%;
}

Now the header is displayed max left and ignores the top-bar. Íf the top-bar is present, the header should be below, else the header should be top: 0;

What’s missing?

Thanks in advance!

[wo]

Now, the header is centered again.

.site-header {
    position: fixed;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

[David]

Hi there,

did that resolve the issue ? Let me know

[wo]

Hi David,

not yet there. The header is still totally fixed below the top bar area. No matter if we have a topbar or not, when the page has scrolled.

When the page is scrolled, the top bar disappears, as supposed, but the page content is now visible above the fixed header.

Like said, I try to achieve exactly the behaviour like truelook.com, where the header is fixed, relative to the topbar.

[David]

The best solution would be to enable the Navigation as Header option in Customizer > Layout > Header.
Then enable the Customizer > Layout > Sticky Navigation.

If needed we can assist with some CSS to increase the logo size.

[wo]

Ok. Done. Been there, several times 🙂

Result: the header is moving again, according to the topbar. Beside, it’s just one line high, minimizing the logo to the menu item height.

[wo]

“Sticky Navigation” does not work, in this context.

Truelook.com uses

@media(max-width:991px) {
	.site-header {
		position: fixed;
		width: 100%;
		height: 54px;
		border-bottom: 1px solid #eee;
	}

I think, that’s the direction (?)

[David]

Now go to Customizer > Layout > Primary Navigation and set the Inner Navigation Width to Contained.
Increasing the menu item height in the same settings will also increase the size of the logo.
But if you want to set the logo height independently then add this CSS:

.navigation-branding img, 
.site-logo.mobile-header-logo img,
.main-navigation.sticky-navigation-transition .navigation-branding img {
    height: 100px !important;
}

[wo]

Thanks. Now the main problem is still the same, unfortunately: Nothing is sticky.

Both, top and navi bar disappear, when page is scrolled.

[David]

I have updated the CSS here – to include the Sticky logo:

https://generatepress.com/forums/topic/fixed-header-like-truelook-com/#post-1415866

The sticky is working for me. But you have the Hide on Scroll down checked:

https://docs.generatepress.com/article/sticky-navigation/

[wo]

Ok thanks. Indeed. Hide on Scroll Down was checked. My fault. Sorry.

Now, the header is shrinking again, on scroll.

I don’t want it to shrink. When the topbar disappears, on scroll, the logo / navi bar should move to the top. No shrink, no transition.

I mean, exactly like truelook.com 🙂

[David]

I updated the CSS here:

https://generatepress.com/forums/topic/fixed-header-like-truelook-com/#post-1415866

Make that change and you can also remove the CSS you added for the fixed site-header

[wo]

David, thank you so much. Yes, the updated CSS works like a charm!

Had to rethink, what you mean by “update”, before I got it, finally 🙂

[David]

Glad to hear that 🙂

[wo]

I forgot the mobile version.

Do you have a quick tip as well, how I get close to truelook.com, showing just the logo on the left and a hamburger on the right?

[Author]

Posts