[Resolved] Search Icon Changes Position In Sticky Menu

Home Forums Support [Resolved] Search Icon Changes Position In Sticky Menu

Home Forums Support Search Icon Changes Position In Sticky Menu

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #896601
    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?

    #896662
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Thanks!

    #896670
    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.

    #897026
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #897232
    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

    #897301
    Tom
    Lead Developer
    Lead Developer

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

    Thanks! πŸ™‚

    #897523
    Michael Largue

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

    #898080
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #898285
    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

    #898373
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #898527
    Michael Largue

    Thanks Tom

    As always, you are absolutely fantastic.

    Regards
    Michael

    #899189
    Tom
    Lead Developer
    Lead Developer

    Glad I could help – thanks for pointing out the inconsistencies, I’ll get them fixed πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.