Archived topic

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

3 replies · Started by Matthew on March 21, 2018

Viewing posts 1–4 of 4

March 21, 2018 at 12:05 pm #525691

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

March 21, 2018 at 9:03 pm #525972

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

March 22, 2018 at 9:39 am #526518

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

March 22, 2018 at 8:32 pm #527222

Glad I could help! I'll definitely consider it :)

This archived topic is closed to new replies.

Start building better websites today.