Archived topic
Search field on top off everything. Can't click away (mobile)
5 replies · Started by Diederick on February 9, 2021
Hi,
I've done some updates and seems like the mobile behavior changed on my mobile view.
Normally it was in the slide-out menu.
But when we clicked on it the slide-out menu closed and the normal search field was shown.
So we brought back the search icon in the mobile header.
But now when we click on the search the close icon isn't visible.
So you are kinda stuck...
I've checked the Z-index and these seem to be correct.
And can't really think of something else.
Can you guys have a look and see what happend?
Thanks!
Hi there,
Try adding this CSS:
.nav-search-active ~ .mobile-bar-items {
align-self: flex-start;
}
.mobile-bar-items span.search-item.active.close-search {
position: absolute;
}
.mobile-bar-items span.search-item.active.close-search .icon-search {
color: black;
}It will work something like this: https://share.getcloudapp.com/wbu97b8o
The color:black is optional but I've added it in because having a gold close button isn't easy to the eyes. You can adjust it to your preference.
Hi Thank's for the aid.
But it didn't fix it.
The button is still underneath it.
Tried it on the staging this time.
Ah I see. I missed something.
Try this:
On this custom CSS:
.mobile-bar-items {
display: none;
right: 0;
top: 0;
z-index: 21;
list-style-type: none;
}Change z-index:21; to a value higher than 100.
Example:
.mobile-bar-items {
display: none;
right: 0;
top: 0;
z-index: 101;
list-style-type: none;
}That worked! Thanks.
Only strange that the Z-index has this strange behavior.
Only strange that the Z-index has this strange behavior.
z-index is pretty tricky to deal with because you have to check and track for any z-index values that may have been assigned to any ancestor elements as well. :)
No problem. Glad you got it sorted. :D
