[Support request] search icon placement on mobile

Home Forums Support search icon placement on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1353312
    Robin

    Using Off-canvas panel only for navigation, and I’d like the search icon (magnifying glass) to stay in the same place on desktop, tablet, and smartphone.

    Is that possible?

    #1353446
    David
    Staff
    Customer Support

    Hi there,

    add this CSS to your site:

    #mobile-header .mobile-bar-items {
        order: 4;
    }
    #1353870
    Robin

    Thank you.

    Are there also orders designated as 1, 2, 3? And if so, what are they?

    #1353896
    David
    Staff
    Customer Support

    In the default mobile header layout when Search is enabled – there are 4 elements.

    Logo: 1
    Mobile Bar Items ( Search Icon ): 2
    Hamburger: 3
    Mobile Menu: 4

    You will note that Mobile Bar and Mobile Menu now both have order: 4;. As mobile bar comes first as it is before the menu in sites HTML.

    This works because the Mobile Header is set up using CSS Flexbox – of which the order property is one of its features.

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