Make the header narrow and change shop and search icon to black

[Beaumette]

Hello everyone,

I have encountered another challenge and I hope someone can help me with it.

So, based on a YouTube tutorial, I made my header transparent and when I scrolled down it automatically changed to solid. The tutorial and associated codes I used can be found here:

https://websensepro.com/blog/how-to-make-a-transparent-header-in-shopify-dawn-13-0-1/

I then made the header solid in the mobile view and left it as is in the desktop view. I used this code for that:

theme.liquid:

@media screen and (max-width:768px){ .header-wrapper { background: black; position: relative; width: 100%; top: 0px; } }

Now I want to make the size of the header and logo a little smaller, both in mobile and desktop view, as the header is now it takes up a lot of space on the screen. I also want to change the shop and search icon to black. Does anybody know how to do this? I would really appreciate it!

Website: www.beaumette.com

Password: Beaumette123!

Thanks in advance for your assistance and insights!

Best regards,

Jamal

[TerenceKEANE]

Hi,

If I understand correctly, the following code will be quite useful for you. Let me know if you encounter any issues.

Navigate to the ‘Edit Code’ option in your theme settings, then search for “base.css” in the search bar and add below codes.

.header__heading-link {
    padding: 0 !important;
}

.header__heading-logo {
    max-width: 75px!important;
}

@media screen and (max-width: 749px) {
    .header__heading-logo {
        max-width: 60px !important;
    }
       sticky-header header.header.header--middle-left.page-width.header--has-menu {
        height: auto!important;
    }
}