Sticky/Fixed Header and Navigation for Debut Theme

Highlighted
Tourist
5 0 1

Hi Sean, I used the option two on my brooklyn theme and it worked great. I have a few issues though and I was hoping you could help me with it. Or anyone that knows the answer!

 

I have the fixed menu change color when i scroll down, but I don't know how to also change the text and icons, they stay white and can't bee seen properly, I would like them to be grey. Also there is a space between the top of the page and the fixed menu, I would like that not be there, and for the menu to be attached to the top of the page. Screenshot: https://imgur.com/mx3FDG2

 

Also, the menu is too low and covers part of all other pages.  How can I fix that? I already modified the padding on the code for the menu, but that doesn't help.

Screenshot: https://imgur.com/ufkG8no

 

These are my codes:

 

I have this at the end of theme.scss.liquid: 

 

/* CHANGE HEADER TO STICKY */
 
#SearchDrawer {
  z-index:1001;
  
}
 
.site-header {
  position: fixed;
  z-index:1000;
  background-color: #F7F1EB;
  left:0;
  right:0;
 
}
 
.template-index .fixed-header .site-header {
background-color: #F7F1EB;
}
 
#PageContainer {
  padding-top: 100px;
}
 
@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
  
}
}

 

And this at the end of theme.js.liquid:

 

// Header

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');
}
});

 

 

0 Likes
Highlighted
New Member
1 0 0

@jessisaun Same theme and issues for me. Did you discover a solution? 

 

A sticky navigation menu is fairly basic for websites, I'm surprised Shopify does not offer a built-in option. 

0 Likes