Sticky Header overlaping the page, please help!

Spiro_Tsotsos
New Member
3 0 0

Hi guys, i paste a code to my theme scss.liquid file to so that my header will stick on top of my site even when you scroll, the code is :

#shopify-section-header {
position: fixed;
z-index: 5;
background: {{ settings.color_body_bg }};
}
#SearchDrawer {
z-index: 6;
}
.mobile-nav-wrapper {
overflow: scroll;
}

my problem is it over laps on my sites page. can anyone help to fix this problem? Im using Debut theme Hope somebody can help

 

 

0 Likes
John_Qiu
New Member
3 0 0

I'm also having this issue with the Venture theme. Could I get some help too please :) 

 

0 Likes
Spinturnix
Shopify Expert
64 17 15

Hi Spiro,

Setting the site header to a fixed position means it technically doesn't take up any space. Therefore causing the content below to jump up and behind the header.

You'll need to add either margin-top or padding-top to the page container to offset the space your header no longer occupies. In your theme.scss file, find ".page-container" and paste this code in its place. Let me know if you need any help.

.page-container {
  transition: $transition-drawer;
  position: relative;
  overflow: hidden;
  padding-top: 66px;

  @include media-query($medium-up) {
    // Prevent mobile menu inline styles from overriding desktop styles
    // sass-lint:disable no-important
    @include transform(translate3d(0, 0, 0));
    padding-top: 81px;
  }
}

 

And John, I believe the Venture theme has a sticky header by default. Can you explain your problem in more detail? 

John_Qiu
New Member
3 0 0

Hey Trevor,

I actually decided to switch over the brooklyn theme because of the better aesthetic design. 

Can you explain where the .page-container is located? I'm looking in the theme.scss.liquid file but can't seem to find where to input it.

0 Likes
Spinturnix
Shopify Expert
64 17 15

Hey John,

The Brooklyn theme requires some different rules. Try adding this to your theme.scss

#shopify-section-header {
  position:fixed;
  width: 100%;
  z-index: 1;
}

.main-content {
  margin-top: 81px;
  
  @include at-query($min, $large) {
    margin-top: 91px;
  }
}

.header-wrapper {
  background-color: $colorBody;
  border-bottom: 1px solid #efefef;
  
  @include at-query($min, $large) {
    padding-bottom: 15px;
  }
}

 

0 Likes
John_Michael_Al
New Member
1 0 0

Thanks for your help Trivor, this helps alot 

0 Likes
RonMagal
New Member
1 0 0

Hi,

 

can you help me with sticky image scrolling page in venture theme

how can I do it?

0 Likes
kidkove
Tourist
4 0 2

could you please help me with the debut theme

KetanKumar
Shopify Partner
20503 2120 7731

@kidkove 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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 Partner | 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