Fixed Nav Bar is blocking the top of my pages on Debut Theme

Highlighted
Tourist
10 0 0

I managed to make my Nav Bar sticky with the following code on my website: https://pepperemllc.myshopify.com/

}
#shopify-section-header {
position: fixed;
background-color: $color-body;
width: 100%;
z-index: 200;
}

 

But now the Nav Bar is blocking the top of my pages ( https://pepperemllc.myshopify.com/products/llama-shaped-pepper-spray) - see screenshoot

 

Can anyone please advise on how to have the nav bar auto adjust to the pages so it's not blocking the content?

0 Likes
Highlighted
Shopify Partner
1436 194 489

If you go into your theme.scss.liquid file look for Ctrl + f for  #MainContent

It will have a margin-top of 50px:

 

#MainContent {
    margin-top: 50px;
}

Change that to like 121px, that seems good for mobile and desktop from the pages I looked at.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Tourist
10 0 0

This is perfect!! Thank you!!

0 Likes
Highlighted
Shopify Partner
1436 194 489

Not a problem, if you could mark this as solved I would appreciate it. I need the recognition, it makes me feel important.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Shopify Staff
Shopify Staff
138 14 45

Hey, there!

 

My name is Sunny and I would be happy to help with your sticky navigation adjustment.

 

After visiting your shop (which is super adorable by the way!), I can totally see that your new sticky navigation is blocking important information at the top of each page. Although I am no expert in code, it does seem like there may need to be a padding adjustment here. I would suggest adding this piece of code that I shared below to your original code that you added to your shop.

 

#PageContainer {
        padding-top: 80px;
   }

 

You may need to play around with the amount of padding that is needed and based on your personal preferences. I'd suggest looking at your shop on various devices and screen sizes to make sure you are happy with the results.

 

Give that a try and let me know if that did the trick! I would be happy to continue troubleshooting to ensure you're happy with the outcome.

 

Cheers,

 

Sunny | Shopify Guru

Sunny | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Staff
Shopify Staff
138 14 45

Ah! I see I am a little late to the party but I'm so glad that @Ninthony was able to resolve this for you!

 

#TeamWork!

 

Best,

 

Sunny | Shopify Guru

Sunny | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
14 0 2

Hi All

 

I'm also having this issue but it doesn't seem to be fixed with the suggestions you've posted above. 

 

For example, on my product page, the sticky navigation bar pushes down and covers up the product name, no matter how much extra padding I give it. Do you have any ideas?

 

mihi sticky header problem.PNG

0 Likes
Highlighted
Shopify Partner
1436 194 489

What's your store url? Not sure where you're adding padding but you'll need to add padding to your main content section.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Excursionist
14 0 2

@Ninthony wrote:

What's your store url? Not sure where you're adding padding but you'll need to add padding to your main content section.


Hi Ninthony

Store URL is www.mihikids.com. I'll send you the password via direct message.

Cheers
Shaun

0 Likes
Highlighted
Excursionist
14 0 2

I actually think I fixed the issue on desktop, and the nav bar is now not covering information from the product page. However, now there is too much space on mobile, as per the attached.

 

I've added the following code:

@media only screen and (min-width: 750px){
.main-content {padding-top: 150px;}
}

@media only screen and (max-width: 749px){
.main-content {padding-top: 200px;}
}

@media only screen and (max-width:749px){
.site-header { position: relative;}
}

 

mihi sticky header problem mobile.PNGmihi sticky header problem mobile 2.PNG

0 Likes