Increase Icon Size in Header and Place in Line with Logo

[luxoptions]

Hi, I would like to increase the size of my cart, search and account icons in the header. However, I would like to set them to different sizes for mobile and desktop. I would also like to put the logos in line with the header instead of them having their own space above the header. I am using a third party theme that only has a styles.css.liquid and my site is www.luxoptions.com. A picture of my current problem is below. Thanks

[SmallTask]

Hi @luxoptions ,

We need to customize the header.liquid code to fix the alignment of icons and logo

[luxoptions]

how would i do that? @SmallTask

[BSS-Commerce]

Hi @luxoptions

Please follow these steps:

• Go to Admin => Online Store => Theme => Edit Code:

• Choose to find the file style.css.liquid.

• Then, to fix the logo to be in line with the store logo, you can add the following CSS at the end of the style.liquid.css file:

.header__icons--sticky {
                      visibility: visible ;
                     opacity: 1;
                 }
              .shopify-section.top-bar {
                   visibility: hidden;
                  margin-bottom: -100px;
              }

• To adjust the icon size for mobile and desktop, you can customize by adding the following CSS at the end of the style.liquid.css file:

//custom size of icon in mobile
                @media only screen and (max-width: 768px) {
                      .Icon{
                              width: XX px (desired size displayed on mobile)
                        }
                    }

               // custom size of icon in desktop
               @media only screen and (min-width: 1200px) {
                    .Icon{
                          width: XX px (desired size displayed on desktop)
                     }
                }

I hope that it will work for your site.