[Resolved] Position of 'x' (close icon) in search bar on mobile

Home Forums Support [Resolved] Position of 'x' (close icon) in search bar on mobile

Home Forums Support Position of 'x' (close icon) in search bar on mobile

  • This topic has 3 replies, 2 voices, and was last updated 6 years ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #525691
    Matthew

    Hello,

    I have navigation search enabled on my site… it looks and works great, for the most part.
    However, on mobile/tablet (when the mobile top menu is displayed instead of the regular menu)… when you tap on the search icon, and the search bar opens up… then the “x” close icon appears almost in the middle of the search bar (where the search/magnifying glass icon is/was), and not to the far right, as I would expect it to.

    I tried playing with the CSS to adjust it, but there is no specific class on the container to make only it have its position be absolute and make it right: 0 … you’d have to apply it to .mobile-bar-items, which would affect other elements. But perhaps and hopefully I’m overlooking something πŸ˜‰

    Any help would be greatly appreciated.

    Thanks much,
    Matt

    #525972
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    #mobile-header .nav-search-active + .site-logo + .mobile-bar-items {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
    }
    #526518
    Matthew

    You’re the man Tom! That worked perfectly πŸ™‚ thanks so much.
    You might want to consider adding that into the default CSS, as I don’t see others wanted the same default behavior (that was occurring before adding this CSS)?

    Best,
    Matt

    #527222
    Tom
    Lead Developer
    Lead Developer

    Glad I could help! I’ll definitely consider it πŸ™‚

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