Shopify themes, liquid, logos, and UX
Hello All,
I have set up my store with Sticky header. However, it consumes significant space while scrolling down.
Can you advise how to make the header space automatically shrink while scrolling down?
Store: https://medendemo.myshopify.com/
Password: Welcome01!
Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
Thanks for it
1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.site-header__logo img {
transition: all 0.9s;
}
.header-sticky .site-header__logo img {
max-width: 100px;
}
This is an accepted solution.
Thanks for it
1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.site-header__logo img {
transition: all 0.9s;
}
.header-sticky .site-header__logo img {
max-width: 100px;
}
Hi @KetanKumar ,
Thanks! it works perfectly!!
Is it still possible to reduce the header size? adjusting the height is still possible??
I feel it will be much nicer if the height is reduced a bit! can you advise on that?
Thank you in advance!!
Yes, please reduce header logo height then automatic reduce
Hey!
is this also possible in the debut theme?
thanks!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi This code didn't seem to shrink the header on my brooklyn theme.
I have used the below code for sticky header as it suited the store.
#SearchDrawer { z-index:1001; } .site-header { position: fixed; z-index:1000; left:0; right:0; -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); } #PageContainer { padding-top: 80px; } @media screen and (max-width: 749px) { #PageContainer { padding-top: 70px; } }
function headerSize() { var $headerHeight = $('div#shopify-section-header').outerHeight(); $('#PageContainer').css('padding-top', $headerHeight); } $(window).on("load", headerSize); $(window).on("resize", $.debounce(500, headerSize)); $(window).scroll(function() { scroll = $(window).scrollTop(); if (scroll >= 1) { $('.site-header').css('top', '0'); } else { $('.site-header').css('top', 'initial'); } });
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024