How can I add a search icon and center the logo on my mobile header?

Store Design
1

Hello, We need a header change.

We are currently missing the search icon. The search box appears only in the menu.

  1. We want to add the search icon.
  2. We want to center the logo on the center.

HMD-HEADER.jpg
HMD-HEADER.jpg1200×674 127 KB

Our shop: https://bit.ly/3H4CbQi

2

Hi @PascovskiV ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 991px) {
.site-header__search-pop {
    display: block !important;
}
.site-header__logo {
        position: absolute;
    top: -28px;
    left: calc(50% + 50px);
    width: 100px;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
3

It works! Thanks! :heart: