[Support request] Fixed Header like truelook.com

[David]

Simplest solution is to enable the Mobile Header Option in Customizer > Layout > Header.
Make sure to add a logo in the field provided.

[wo]

Sorry, slightly too simple 🙂

Enabling the mobile header moves it to the top, overlapping the top bar. Question is, how to align the logo, the hamburger and the search icon, horizontally, below the top bar.

Again, I’d prefer the truelook.com version, when it comes to mobile.

Simply the logo on the left, and a big burger on the right.

Probably best without search icon and not sticky, since we have a prominent “move to top” button floating.

Maybe it’s even possible to put the search option at the end of the menu?

[David]

It really shouldn’t be this difficult lol 🙂

For future reference. With navigation as header and mobile header – the size of the Logo is defined by the Customizer > Layout > Primary Navigation –> Menu Item Height.

However, lets fix the logo. Can you change this CSS:

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

to

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

You can disable the Sticky Navigation for mobile only in in Customizer > Layout > Header –> Mobile header.

Do you want to keep the Search icon on desktop only?

[wo]

Thank you again for your patience. It’s my first GPP site. Probably I am getting better, some day 🙂

Yes. After juggling through all mobile screen dimensions, eliminating the search icon on mobile seems appropriate. How could I do that?

The perfect solution would be, Logo left, Burger right. If the screen is too small, the burger should fall under the logo, vertically aligned. For now, I don’t know how to css that, but should be feasible.

But what’s the secret of Customize > Layout > Primary Navigation > Navigation Drop Point?

I’d expect, in this case, Logo Width + Burger Width > Screen Width: drop the burger.

Where am I wrong?

[Tom]

Hi there,

I think the main issue here is that your mobile menu item height is only 20px. What happens if you change that to something like 80px? I believe that will prevent the top bar overlap that you’re seeing.

Other than that, I’m seeing the logo on the left and burger on the right as of right now. What about it are you trying to tweak still (aside from the top bar overlap)?

Let me know 🙂

[wo]

Hi Tom,

thanks, upsizing the mobile menu item height to 80px does help, indeed. And yes, overall, we are pretty there, with a little help of David.

What I am still trying to tweak is the Navigation Drop Point and the shaky menu on scrolling up the page.

Customizing > .. > Navigation Drop Point, 500..2000 makes no difference at all (?)

I’d expect, Drop Point = 2000 would help to never let drop the navigation below the logo, since even the narrowest screen, say 280px wide, should hold the logo and the toggle aligned horizontally. Just in case, it has to drop, then at least gracefully, vertically aligned below, instead of sticking left.

When scrolling up the page, the menu is slightly shaking, kind of “vibrato”, while the logo seems stable. Do you have an idea, how I could stop this unintended “animation”?

Thanks in advance. GP, you and your team are really, really great, anyway! 🙂

[David]

Go to Customizer > Layout > Primary Navigation – in the Menu Item Height for desktop you have a value.

Make sure you have the same value in Customizer > Layout > Sticky Navigation.
This will stop it from resizing when scrolling.

Drop Point doesn’t apply when Navigation as Header is selected ( note for us: we should hide that option ). Instead you can increase the Mobile Menu Breakpoint so mobile menu appears on a larger screen.

[wo]

Thanks David.

Primary Navigation, Menu Item Height is now 40px. Same as Sticky Navigation, Menu Item Height.

Kind of helps. But is not the solution. The menus are still shaking, on scroll, while the logo is fine.

[David]

Aah.. in Simple CSS you have this:

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .mobile-bar-items a {
    line-height: 34px;
    transition: line-height 300ms ease;
}

You need to remove that as its overriding the Customizer settings.

[wo]

David, you saved my day. Excellent!

Actually no idea, when I did that, even not: why.

Thank you so much.

[David]

🙂
Glad we could be of help.

[Author]

Posts