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

Store Design
1

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.

Screen Shot 2023-06-22 at 12.11.26 PM.png
Screen Shot 2023-06-22 at 12.11.26 PM.png2996×1502 553 KB

2

@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!

3

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.