What's your biggest current challenge? Have your say in Community Polls along the right column.

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

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

shellbell
Shopify Partner
94 1 14

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

Replies 2 (2)

dmwwebartisan
Shopify Partner
12323 2552 3732

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

AliReviews
Shopify Partner
773 90 358

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.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!