Sticky/Fixed Header + Navigation with a twist for Brooklyn theme

CWalker3
New Member
2 0 0

Hey folks,

 

I'm working on my header/navigation bar of my brooklyn theme. I wanted them fixed while scrolling and used pretty much all of this:

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

 

I made some minor adjustments, which aren't of interest in the following subject.

What I'm trying to do now, is that (actually only matters for the homepage) after beginning to scroll down the homepage, that a black background (doesnt necessarily needs to be completely black, can be a somewhat transparent black) surfaces beneath the navigation icons. The icons are "loose" on the homepage or have no background color rather. The icons are white on the homepage (icons of sidemenu nav, shopping cart and logo etc), which are also visible on top of the background picture/slideshow. But when scrolling down below the slideshow section, the background is white, and since is there no background color behind the navigation bar, the nav bar icons and logo aren't really visible since they're white too.

 

The other pages have a fixed white bar and black icons, so that is fine. Just the homepage is bugging me.

 

In other words it should be a somewhat dynamic navigation bar.

(I tried to somehow implement this with some adjustments, but couldn't figure it out:

https://codepen.io/sebastianbaumann/pen/ogGdxX )

 

Appreciate any help. Thanks in advance!

 

Best,

CWalker

 

 

See the pictures below for a better visualization.

nav bar example-actual state 1.pngnav bar example-target state 1.png

Replies 15 (15)
oscprofessional
Shopify Partner
11586 1813 2318

Hello ,

Please give me site url so that I will help you

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Luccardo
Excursionist
20 0 5

Hi,

 

I added a fixed header to my Brooklyn theme a while ago, however, just recently i have noticed that it does not stay fixed and flashes away for a second when loading a new page, then reappears, this isn't normally how it was working...

Has anyone had this before, or know if there is a relatively easy fix?

 

Thanks in advance

Luccardo.com

oscprofessional
Shopify Partner
11586 1813 2318

Hello ,

What is your exact issue...I am unable to see any issue on your sticky header while scrolling...

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Luccardo
Excursionist
20 0 5

Hi,

Thanks for your reply.

 

The problem isn't while scrolling, but when you go from one page to another the header disappears for a second as it loads the page, then comes back all in a split second. The header should stay stuck while the page loads, and not flash away.

 

Thanks

Otayfer
Excursionist
32 0 9

Hello,

I have the same problem (transparent background) when scrolling down, my Logo + other Header components are white and disappear on white background... When scrolling below the slider at the top, I would like to change the background color of the header from transparent to black or anyother color than transparent.

 

Did you find a solution already?

Thanks a lot!

Adrian

oscprofessional
Shopify Partner
11586 1813 2318

Hello @Otayfer,

Please share your site url so that I will give you exact solution

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Otayfer
Excursionist
32 0 9

I sent you the Link via DM 👍🏻

oscprofessional
Shopify Partner
11586 1813 2318

Hello @Otayfer.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.js->paste bellow code in bottom of file

$( document ).ready(function() {
$(window).scroll(function(){
    if ($(window).scrollTop() >= 300) {
        $('.header-wrapper').addClass('fixed-header');
    }
    else {
        $('.header-wrapper').removeClass('fixed-header');
    }
});
});

Afer that Add below css

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.fixed-header .site-header {
	background-color: black;
}

Note: You can change background color as per your requirement

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Otayfer
Excursionist
32 0 9

Thanks this worked well!

 

However, when I leave the "Home" site and go to another page via the menu the header is hiding the page title now. The header is no longer "pushing" down the page below the header. 

oscprofessional
Shopify Partner
11586 1813 2318

@Otayfer,

Please add this css

body:not(.template-index) .main-content {
	padding-top: 120px !important;
}

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Otayfer
Excursionist
32 0 9

Hello OSC,

 

Thanks this helped. 

 

Unfortunately now I am facing another issue. Maybe this comes from the different code pieces. On my "home screen" I have a dark slide + transparent header with white logos etc. On any other page i have a white header + dark blue logos etc.

 

- When I now scroll down on "home-site" the the logos stay white and the background becomes blue -> Fine

- But when I now scroll down on any other site, the logo stays blaue and the background becomes blue -> Not readable anymore

 

Can I basically swap the logo and menu color used on the "Home-Site" from white to blue and then the background becomes white (when scrolling down). This would fit any other page.

 

And I am wondering of both of these code pieces are needed?!

/* CHANGE HEADER TO STICKY */
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 450) {        $(".hero__header").addClass("darkHeader");
    } else {        $(".hero__header").removeClass("darkHeader");
    }
});

/* CHANGE STICKY HEADER TO CHANGE COLOR BY SCROLLING */
$( document ).ready(function() {
$(window).scroll(function(){
    if ($(window).scrollTop() >= 700) {
        $('.header-wrapper').addClass('fixed-header');
    }
    else {
        $('.header-wrapper').removeClass('fixed-header');
    }
});
});
oscprofessional
Shopify Partner
11586 1813 2318

@Otayfer,

When I now scroll down on "home-site" the the logos stay white and the background becomes blue -> Fine

- But when I now scroll down on any other site, the logo stays blaue and the background becomes blue -> Not readable anymore

 

For this Please do some changes in your css code

Please remove below css

.fixed-header .site-header {
	background-color: #a3aab7;
}

Add below css

.template-index .fixed-header .site-header {
	background-color: #a3aab7;
}

2020-03-02_JS.jpg

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Otayfer
Excursionist
32 0 9

Hi OSC,

 

Very helpful thank you.

 

One question was unanswered, though.

 

"Can I basically swap the logo and menu color used on the "Home-Site" from white to blue (as defined when no transparent header is set) and then the background becomes white (when scrolling down). This would fit any other page."

 

This would lead to a uniform header throughout each site of the shop.

 

Again, Thanks a lot!

 

Adrian

stashnpack
Tourist
3 0 0

hello the sticky header works fine on my brooklyn theme its just whenever i go on mobile the header will cover part of my page and on product pages it will block out a portion of my product photo is there a fix to this? 

Haylalayla
Excursionist
24 0 3

 

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

Thanks alot