Return to previous page

Search icon in header on mobile - by Tagbag

This topic has 6 replies, 2 voices, and was last updated 5 years, 10 months ago ago by Rose Tyler

Tagbag

Participant

February 22, 2019 at 08:29

Hey, is it possible to display the searchform of the desktop, on the mobile too?

Regards

#209627 Copied Theme version: .

5 Answers

Rose Tyler

Support staff

February 22, 2019 at 08:56

Hello,

Please try this code:

@media only screen and (max-width: 992px) {
    .navbar-header .header-search {
        display: inline-block;
    }
    .header-search.act-full-width .search-btn {
        z-index: 9;
        margin-top: 10px;
    }
    .et-header-full-width .navbar-header {
        padding-right: 5px;
        width: 100% !important;
        position:  absolute;
        height: 50px;
        top: 25px;
    }
    .header-search.act-full-width input[type="text"],
    .header-search .et-icon {
        font-size: 1.5rem !important;
    }
}

Regards

#209630 Copied

Tagbag

Participant

February 22, 2019 at 09:18

ok, there is a search icon now. but it does not work 😀 and i can not click on the hamburger menu anymore ^^

Regards
Joey

#209632 Copied

Rose Tyler

Support staff

February 22, 2019 at 09:36

Please change the previous code to:

@media only screen and (max-width: 992px) {
    .navbar-header .header-search {
        display: inline-block;
    }
    .header-search.act-full-width input[type="text"],
    .header-search.act-full-width.search-open i:before {
        font-size: 1.2rem !important;
    }
    .header-search.act-full-width.search-open i:before {
        margin: 16px 5px;
    }
    .et-header-full-width .navbar-header .search-open {
        padding-right: 5px;
        width: 100% !important;
        position:  absolute;
        height: 50px;
        left: 0;
    }
}

Regards

#209634 Copied

Tagbag

Participant

February 22, 2019 at 09:59

Strange. If I set Chrome to mobile size, it works, but if I retrieve the page directly from the mobile, the search bar does not work ^ ^

#209635 Copied

Rose Tyler

Support staff

February 22, 2019 at 10:58

This situation can be caused by 3rd party plugins or your changes in files.
On my test site, the search can be enabled by css code and works fine on mobile.

Regards

#209640 Copied