Sticky/Fixed Header and Navigation for Debut Theme

Jeck
New Member
1 0 0

I tried to do this and it really works.

But the dropdown(when you add menu under menu haha), the search and the three-bar(for mobile view) are not working.

0 Likes
Emma_Beckett
Tourist
8 0 1

Hi Sean

Thanks for sharing this.

Is there a way to just have the announcement bar visible at all times and not the header/menu bar when scrolling down the home page?

Thanks!

0 Likes
KerryAlx
Tourist
5 0 2

Hi SeanP

I am sure you must be frustrated with all of these tech support questions - so I completely understand if you don't reply!

I am using Debut theme with the announcement bar enabled. I have implemented Option I and it does work... but down by screen "jumps and jiggles" when it loads. Any idea what I am doing wrong?

Thanks

Kerry

 

 

0 Likes
MinusH2O
New Member
1 0 1

Here's the fix to the Header covering the contents of the Body of the page.

You need to increase the space between the Header and the Body of the page. I found that this can be adjusted by changing the values in the code above (see my example below in bold) which had acceptable results for my site. Note that the top value changes the desktop version of the theme and the value below changes the mobile version.

 

#PageContainer {
padding-top: 130px;
}

@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 200px;

 

 

rumirei
New Member
3 0 0

thanks for posting @MinusH2O . I changed the values you gave to the following to fix the header on my page. 

 

#PageContainer {
padding-top: 201px;
}

@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 301px;
}
}

0 Likes
Bonny_Belanger
Excursionist
21 2 1

I am having the same problem with the announcement bar pinned to the top (good thing) but the navigation bar is not moving up to fill the space.  Did you find a solution?

0 Likes
Bonny_Belanger
Excursionist
21 2 1

I am having the same problem with the announcement bar scrolling out of view (good thing) but the navigation bar is not moving up to fill the space.  Did you find a solution?

0 Likes
nuarswim
New Member
3 0 0

The sticky header is working  well for me in the desktop view, but no on mobile... Does anyone have any tips on how to fix this? I am using the debut theme. 

0 Likes
Diananajera93
New Member
1 0 0

Hi! I have a question about your sticky navigation how did you make it where it is white completely? Mine follows the user but it looks like this:

 

9A5A85F6-334A-441B-8FB5-22BFF5E156A3.jpeg

0 Likes
PrimpandPosture
New Member
1 0 0

This worked for me!!! Extending a big thanks, I've been troubleshooting this issue for days!

0 Likes