Moving the logo and search icon on mobile

Retired Boards Appdev Store Design
1

How can I move the logo to the left and the search icon to the right on mobile? Here is an example of what I am looking for:

IMG_6851.jpg
IMG_6851.jpg1179×193 10.7 KB

This is what my header looks like now!

IMG_6852.jpg
IMG_6852.jpg1179×380 25.1 KB

2

Hi @omar_ab ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1721437329734.png
BSSCommerceHDL_0-1721437329734.png1637×691 80.9 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

Hi @omar_ab ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

@media screen and (max-width: 991px) {
    header .container {
        position: relative;
    }
    
    .modal__toggle-search-mobile {
        position: absolute;
        right: 50px;
    }
    
    header .col-logo .site-header__logo {
        position: absolute;
        left: 65px;
    }
}

Here is the result

BSSTekLabs_0-1721438030744.png
BSSTekLabs_0-1721438030744.png846×350 99.1 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

1 Like