How can we add background color in the header icons

Store Design
1

How can we add background color in these header icons, like this image below:

icon colors.JPG
icon colors.JPG963×215 10.7 KB

2

Hi @alexalex_225 , can you share your store url?

3

@Abdosamer check your inbox messages. I shared the URL

4

@alexalex_225 , go to base.css and add the following code :

svg.modal__toggle-open.icon.icon-search {
    margin: 0 !important;
}

svg.icon.icon-hamburger {
    margin: 0 !important;
}

 .header__icon .icon {
    
    margin-left: 1rem;
    background-color: green !important;
    border-radius: 5px;
   
}
5

@Abdosamer now looking like this in below image. I want the background color boxes to be equal in sizes

result color.JPG
result color.JPG518×178 3.5 KB

6

@alexalex_225 , Add this to base.css :

.header__icon .icon {
   
    height: 3rem !important;
}
7

now now.JPG
now now.JPG343×172 3.94 KB

@Abdosamer Now looking like this above. I want the “search icon” and “hamburger/drawer icon” to look exactly like “cart icon” which has fair size and placed in the center of the color box. search and hamburger icon are quite big in size now and the color box is also not square around them.

8

Hello @alexalex_225
Can you share Store URL?

9

@niraj_patel kindly check your private message inbox. i shared url there

10

@Abdosamer @niraj_patel

.header__icon .icon {
margin-left: 0.5rem;
background-color: #00404D !important;
border-radius: 5px;

height: 3rem !important;
width: 3rem;
}

I added this code to add color box around header icons. Kindly let me know how can i reduce the only icon sizes without reducing the color boxes, as you can see (below image) header icons are quite large in sizes as compared to the color boxes.

correct now.JPG
correct now.JPG480×187 4.46 KB

11

Hello @alexalex_225

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your base.css file

  3. Paste the below code at bottom

.header svg.icon.icon-hamburger {
padding: 9px !important;
}

.header svg.modal__toggle-open.icon.icon-search {
padding: 6px !important;
}

12

@niraj_patel Now in mobile view, header icons are not properly placed, (see image below). Kindly let me know how to align these header icons properly in Mobile view.

mobile icon.JPG
mobile icon.JPG431×147 9.65 KB

13

Hello @alexalex_225
Can we discuss in dm?

14

@niraj_patel sure, check your dm

15

Hello @alexalex_225

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your base.css file

  3. Paste the below code at bottom

@media screen and (max-width:767px){

.header .header__icons a#cart-icon-bubble {
position: absolute;
left: 75px;
padding-bottom: 0px !important;
}

}

16

@niraj_patel kindly check your inbox now

17

Hello @alexalex_225

You can add code by following these steps to align footer content in center in mobile view

  1. Go to Online Store → Theme → Edit code.

  2. Open your base.css file

  3. Paste the below code at bottom
    @media screen and (max-width:767px){
    .footer .footer__blocks-wrapper.grid.grid–1-col.grid–2-col.grid–4-col-tablet.scroll-trigger.animate–slide-in {
    display: flex;
    justify-content: center;
    align-items: center;

}
}