Header Adjustments for a Jewellery Shopify Store

[middlebeats]

Hi,

I'm using the Monaco theme for a Shopify store. Could anyone please assist with the following adjustments?

1. Remove the digit zero from next to the cart (bag) icon.
2. Ensure that no words (e.g., "search") appear next to the icons in the computer view, keeping the icons only.
3. Center the logo in the mobile view.
4. Change the color of the header background, header text, and header icons.

Shopify Store: https://www.fatatjewellery.com
Password: fatat

Thank you!

[Sweans]

Hi @middlebeats ,

We have checked your store and requirements.

Remove the digit zero from next to the cart (bag) icon.

Ensure that no words (e.g., "search") appear next to the icons in the computer view, keeping the icons only.

Center the logo in the mobile view.

Change the color of the header background, header text, and header icons.

These can be done from the code level. It would be great if you could direct message us and give the store access. So we can make these adjustments in the store.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,

Sweans

[middlebeats]

Hi @Sweans,

Thank you for checking the store and the detailed feedback.

I am familiar with coding and have fixed some issues before. I just need guidance on the specific codes or instructions to:

1. Ensure that no words (e.g., "search") appear next to the icons in the computer view, keeping the icons only.
2. Center the logo in the mobile view.
3. Change the color of the header background, header text, and header icons.

[Sweans · Accepted solution]

Hi @middlebeats ,

1. Ensure that no words (e.g., "search") appear next to the icons in the computer view, keeping the icons only.

Sweans: Could you please edit the header.liquid file and search for the text "Search" or the class name "header__icon-name". If you do not want the text, you can remove it from the code.

2. Center the logo in the mobile view.

Sweans: For this, you have to add the media query css. Edit the theme.css and check whether is already added any css code under the mobile resolution. If not, you can add the below code.

@media only screen and ( max-width: 500px) {
    .header > .header__heading, 
    .header > .header__heading-link {
      margin-left: 20%;
 }
}

3. Change the color of the header background, header text, and header icons.

Sweans: Please check the theme settings and you can see the option to change the header background color.

If you can't see the option, please share the theme settings screenshots. So we can check it and find out the settings.

Otherwise, you can add the below code in your theme.css above the @media query css.

.header {
  background-color: #000 !important;
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[middlebeats]

Thank you so much. Regarding the header, yes, I have the color settings, but if I can't change the color for only the header background or header text, it forces me to change many other things with it. That's why I need to do it by coding. Now, I need to make the header text and icons white

[Sweans]

Hi @middlebeats ,

Can you please add the below code in your theme.css above the @media query css. So only the header section will be black background color. You can change the icons and other text color to white from the theme settings.

.header {

  background-color: #000 !important;

}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans