How to center align logo in desktop and mobile version

Technical Q&A
, ,
1

I tried many things by searching on google but I couldn’t get the job done. I want the logo of my website to be center aligned on desktop and mobile. Also I want the search icon to be eliminated in mobile version. The theme I’m using is warehouse. Quick help would be appreciated.

Mobile Issue Screenshot:

Prob SS1.png
Prob SS1.png445×135 6.35 KB

Desktop:

Prob SS2.png
Prob SS2.png1437×194 11.2 KB

1 Like
2

Hi @_WB

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

Hi, the store URL is

cee644-2.myshopify.com

I have it published as of now.

4

Hi @_WB ,

You can center your logo following these steps:

  1. Open your online store, open your theme, choose edit code:

  2. Find the file names theme.css and patse the code below:

.header__logo-image {
   position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}
.header__inner {
   min-height: 50px;
}

Hope it helps @_WB

1 Like
5

Hi,

The solution worked perfectly for the logo alignment. Could you help with the removal of the search icon as well(in the mobile version)? Thanks

6

Hi @_WB

You can remove search icon in the mobile with this code:

.header__action-item a[data-action="toggle-search"] {
	display: none;
}

Just find the file names theme.css in your theme and paste the code i mention

Hope it helps @_WB

7

Thanks! It worked perfectly.