How can I hide or reduce the logo size on my sticky header?

[shellbell]

I want to hide, or at least make smaller the logo on the sticky header when scrolling. It takes up too much space right now. It could have the announcement bar and navigation menu, but hide the rest when scrolling as it blocks the products in the collection pages.  

[dmwwebartisan]

@shellbell 

Please add the following CSS code to your assets/modules/theme-site-header.css bottom of the file.

@media only screen and (min-width: 769px){
.site-header--opening .site-header__logo {
    text-align: left;
    display: none !important;
}
}

Thanks!

[irene-vintage]

Hello @shellbell ,

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code 

Go to Assets folder -> base.css file -> add this following code at the bottom of page

.announcement-bar.sticky,
.navigation-menu.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

.header:not(.sticky) {
  display: none;
}

Save changes 

Hope this can help. Let us know if you need any further support.

Ali Reviews team.