Debut Theme Sticky Header but not announcement bar, leaves gap

Store Design
1

Hi, I searched several tutorials and successfully made only the navigation sticky. However, because the announcement hasn’t been fixed, there is a gap between the navigation and the top of the screen. Can anyone suggest?

Thanks.

2

Hi @Echo-QY2021 ,

Please share your store URL and Store’s password to view your website.
So that I will check and let you know the exact solution here.

Best regards.

3

@Echo-QY2021 ,

Please share the URL.

4

Hi, Thanks for your reply.

https://pawpawup.com.au/

Currently, I am using the theme before the “header sticky” edit due to the gap.

5

Hi, Thanks for your reply.

https://pawpawup.com.au/

Currently, I am using the theme before the “header sticky” edit due to the gap.

6

@Echo-QY2021 ,

You want like this ?

oscprofessional_0-1655283494982.png
oscprofessional_0-1655283494982.png1580×795 181 KB

7

No. I don’t want a sticky announcement. I want only navigation bar sticky

8

@Echo-QY2021 ,

Add only css will not work properly you have to include JS or Jquery function intheme.js file.

like this

$(window).scroll(function(){
var sticky = $(‘.sticky’),
scroll = $(window).scrollTop();

if (scroll >= 100) sticky.addClass(‘fixed’);
else sticky.removeClass(‘fixed’);
});

9

Thanks a lot for your kind help.

I did put codes in the .js file. It did work but will leave a gap between the page top and the navigation. This gap space is exactly where the announcement bar originally was at. Do you know how to solve this issue?

10

@Echo-QY2021 ,

Ok I see it again.

11

Hey, did you found the answer to this? I’m have the same problem and am still trying to figure it out…