How to make a sticky/fixed header with its width getting smaller and logo removed after scrolling?

Highlighted
Tourist
14 0 1

Hi,

 

My store URL is www.rrtoolstore.com. I am using Debut theme.

 

I want to make my header which contains the navigation etc. stick to the top after scrolling is initiated. I don't want the announcement bar to be sticky. Now for this I can follow the wonderful tutorial below by @SeanP but it causes the page to start beneath the sticky menu. It gives a weird look after you scroll and comeback to the top like something is being covered under the sticky menu. I couldn't figure out how to resolve this issue. Help would be greatly appreciated.

 

https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/m-...  

 

Apart from making my header sticky, I want the header height to reduce and logo removed after scrolling is initiated. This is because my header covers around 20% of screen and I don't want the same size when someone has started scrolling. 

 

Can anyone please point me towards a solution for this please?

0 Likes
Highlighted
Shopify Partner
2 0 0
0 Likes
Highlighted

Hey @MayankJ,

Looks like you need a shrinking nav bar design. A lot of premium themes support this kind of a header. If you wish to implement this yourself, you can look at this example code: https://www.w3schools.com/howto/howto_js_navbar_shrink_scroll.asp
You can make your logo small when scrolled, it'll be good to have the logo throughout your site. But in case you don't want to show the logo, you can make edit to the JS condition to hide the logo on scroll

Hope this helps! Wish you all the best.

Cheers,
Vignesh
ModeMagic

If you found this helpful then please Like and Accept Solution
Install ModeMagic - Product Labels & Badges for your store
Featured on Shopify App Store
0 Likes
Highlighted
Excursionist
17 0 2

hello I am having this same issue that I cannot seem to resolve. Please see store on mobile: http://experiencecbd.com/

I am trying to hide the logo div id "logomobileheader" on scroll, but it does not seem to work. Also the fixed header transition on scroll is not smooth at all. Please help. I used this below to style fixed header.

 

<style>
.tt-mobile-header {
  background: #1e73be;
  z-index: 9999;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>
<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeaderMobile");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
};

$(window).scroll( function() {
    if( $(this).scrollTop() > 0 ) {
        $("#logomobileheader").hide();
    }
    else {
        $("#logomobileheader").show();
    }
});
</script>

 

0 Likes