Debut - HALF sticky header

Solved
Highlighted
Explorer
89 0 20

Hi,

I followed the Shopify sticky header tutorial and it worked perfectly, however I would like only part of it to be sticky, that being the lower part with the navigation. At the top of the page, the logo would be visible above the header, however when you scroll down, only the navigation links would remain visible. 

Of course this would only be necesarry on desktop. Anyway to do this?

my url is lokalebloemetjes.myshopify.com and I want it to look like my other (WordPress) website at lokalebloemetjes.nl

 

Thanks!

1 Like
Highlighted
Shopify Partner
5868 860 1967

Hello, @augds 

can you please try this 

https://codepen.io/mischuk/pen/hoGLB

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Explorer
89 0 20

Hi @KetanKumar 

 

Could you please explain a little more, what of that code exactly to place in my theme files?

 

Thanks!

 

0 Likes
Highlighted
Shopify Partner
5868 860 1967

@augds 

can you please add this script theme.js
then chagn class name did you like sticky.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Explorer
89 0 20

Add what exactly? All three of the things?

So add this to theme.js? Could I maybe add you as staff member quickly? @KetanKumar 

<div class="headline"></div>
<div class="header"></div>
<div class="wrap"></div>
@import "nib"

.wrap
  height 3000px
.headline
  height 120px
.header
  background green
  height 80px
  transition height .5s ease-in
.header.fixed
    width 100%
    position fixed
    top 0
    height 50px

$(window).scroll(function(){
      if ($(this).scrollTop() > 120) {
          $('.header').addClass('fixed');
      } else {
          $('.header').removeClass('fixed');
      }
});

 

0 Likes
Highlighted
Shopify Partner
5868 860 1967

@augds 

Yes, add me staff member.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Explorer
89 0 20

If the email I need to ask is bamaniyaketan.sky@gmail.com then I just did. Thank you!

0 Likes
Highlighted
Shopify Partner
5868 860 1967

@augds 

i have added script with class add remove "fixed" can you please appy css as you like.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Explorer
89 0 20

Thank you @KetanKumar but I don't see any changes on the website yet. (I cleared cache and from incognito). I don't know exactly how to apply the css here. I just want it to look like here: https://lokalebloemetjes.nl/

0 Likes
Highlighted
Shopify Partner
5868 860 1967

This is an accepted solution.

@augds 

i have done this please check.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like