Sticky/Fixed Header and Navigation for Debut Theme

Highlighted
Tourist
7 0 2

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
Tourist
8 0 1

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

1 Like
Highlighted
New Member
1 0 0

option 1 - step 5:

filename should be renamed from "theme.js" to "theme.js.liquid" !!!!

 

sticky header works perfect

0 Likes
Highlighted
Excursionist
22 0 3

Can anyone help me to make my main navigation header sticky in brooklyn theme 

Thanks alot


@jessisaun wrote:

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

 

 





@jessisaun wrote:

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

 

 



@jessisaun wrote:

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

 

 




header sticky in theme brookyln but I can`t,can anyone help me?


@jessisaun wrote:

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

Hey Sean, 

 

I'm trying to impliment your code into my website - option 2. Its moving the logo up and down, however the navigation menu is remaining at the top. What I'm seeking is to keep the announce bar and logo at the top, but I would love to have the Navigation menu (which has home, shop, collabs, stories, contact us) to stick to the top as the user scrolls up and down. I'm not a super experienced coder, so I'm hoping you'll able to assist me with this!
Any help from you or others - again would be greatly appreciated!

 

0 Likes
Highlighted
Shopify Partner
76 8 19

Hey @Haylalayla 

I have a working solution to the sticky header in brooklyn theme.

Here is my short guide with simple, easy to follow instructions: https://community.shopify.com/c/Technical-Q-A/Sticky-header-transparent-on-home-page-white-backgroun...

I help family-run brands increase D2C sales online.


Problem Solved? ✅ Accept the solution so you can help others.

Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com

Did my answer save you time? Buy me a coffee, please ☕ paypal.me/braiv

Want to increase revenue? $ Find where you are leaving money on the table with your Shopify store by reading "Your Next Brass Ring"
0 Likes
Highlighted
New Member
2 0 0

Thank you Sean OPtion 1 work a treat for me. 

0 Likes
Highlighted
New Member
4 0 0

If a menu with sub menu is longer than a phone screen you cannot see all the menu. Is there a bit of code that I can use to turn off Sticky/Fixed Header  when viewed on phones. Thanks in advanced. 


0 Likes
Highlighted
Tourist
31 3 5

does anyone else get an issue with their cart when the header is sticky. 

When i open the side cart the frozen header cuts off the top of the cart. 

 

Anyone find a work around

 

Untitled.png

0 Likes
Highlighted

Hello ,

Please share your site url.

So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like