[Resolved] Search field on top off everything. Can’t click away (mobile)

Home Forums Support [Resolved] Search field on top off everything. Can’t click away (mobile)

Home Forums Support Search field on top off everything. Can’t click away (mobile)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1651975
    Diederick

    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!

    #1652439
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1652791
    Diederick

    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.

    #1652844
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1652935
    Diederick

    That worked! Thanks.
    Only strange that the Z-index has this strange behavior.

    #1653878
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

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