How can I fix the search bar on my tablet version?

My mobile search has what I wanted like this

, but when I make the screen for tablet version, it changes to this

www.constructionlayers.com

PW: CollectionThree

1 Like

your store is under password protection, so i couldn’t check it exactly but probably there is a faulty adapted css media setting there.

Hi @clayinfo

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

nav.menu-drawer__navigation {
    display: flex;
    flex-direction: column;
}

ul.menu-drawer__menu.has-submenu.list-menu {
    order: 2;
}
#menu-drawer form.search.search-modal__form {
    width: 90%;
    margin: auto;
    margin-bottom: 16px;
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!