[Resolved] Search Icon Changes Position In Sticky Menu

[Michael Largue]

I have both the Search and Cart Icons active in the header. By default, the Search icon appears to the left of the Cart icon. However, when I scroll down and the sticky header kicks in, the Search Icon changes to the RIGHT of the cart icon.

What I have also noticed, is that with the default header Search position, when entering search text, that the text flows over the X close icon.

My preference would, therefore, be that the Search icon is always positioned on the extreme right. Is the above a bug? How can I accomplish this outcome?

[Tom]

Hi there,

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

Thanks!

[Michael Largue]

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.

[Tom]

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 🙂

[Michael Largue]

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

[Tom]

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

Thanks! 🙂

[Michael Largue]

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

[Tom]

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 🙂

[Michael Largue]

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

[Tom]

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

[Michael Largue]

Thanks Tom

As always, you are absolutely fantastic.

Regards
Michael

[Tom]

Glad I could help – thanks for pointing out the inconsistencies, I’ll get them fixed 🙂

[Author]

Posts