Search Icon Changes Position In Sticky Menu

Hi there,

Sounds like a bug. Can you link us to your site?

Thanks!

Hi Tom

I have updated an online site to the same as my local site and have a different outcome. I need to send you some screenshots of the Customizer. How can I do this? Something has definitely been corrupted. This is not going to be easy. For example, on my local site under the Layout > Header section, there is a Use Navigation as Header checkbox between the Header Padding and Mobile Header settings. This does not show on the online site. There are a couple of other differences as well.

That option will only show if the Navigation Logo is not in use. Check out the Navigation as Header info here: https://generatepress.com/gp-premium-1-8/

In order to know why the icons are mixed up, I'll need to inspect the code of the problem site.

Let me know :)

Hi Tom

OK, I have managed to replicate the problem. I previously provided you with login details to my site (Support Topic #873867), which for obvious reasons I do not wish to advertise here. It should still work.

This example also included the use of off-canvas. Ideally, the order should always be mini-cart, search (without the overlap of X Close) and then hamburger menu. This is because I am using the off-canvas as a mobile menu and a FacetWP filter selection medium. I have another issue in this regard, which we can discuss later.

Regards
Michael

Any chance you can remind me of the URL/any necessary login info? You can email us here: https://generatepress.com/contact

Thanks! :)

I sent the requested details as requested. I merely wanted to confirm that you received them.

Looks like a bug.

Can you try adding this CSS?:

.nav-float-right nav li.wc-menu-item,
.nav-float-right .sf-menu > li.slideout-toggle {
    float: left;
}

Let me know :)

Thanks Tom

The above does keep it consistent between Header and Sticky-header in desktop mode. It also addresses the Search text overflow issue with Search always being the last icon.

Unfortunately, the problem still persists in mobile mode. I am presuming that it is also an easy CSS fix :)

Regards
Michael

Give this a shot:

.mobile-bar-items:not(.wc-mobile-cart-items) {
    order: 4;
}

.main-navigation.has-branding .menu-toggle, 
.main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
    order: 1;
}

Thanks Tom

As always, you are absolutely fantastic.

Regards
Michael

Glad I could help - thanks for pointing out the inconsistencies, I'll get them fixed :)