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

 

 

Replies 18 (18)
John_Qiu
New Member
3 0 0

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

 

Spinturnix
Shopify Expert
65 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.

Spinturnix
Shopify Expert
65 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;
  }
}

 

John_Michael_Al
New Member
1 0 0

Thanks for your help Trivor, this helps alot 

RonMagal
New Member
1 0 0

Hi,

 

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

how can I do it?

kidkove
Tourist
4 0 2

could you please help me with the debut theme

KetanKumar
Shopify Partner
25061 2508 9071

@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
DeadEndStreet
Explorer
103 0 35

Hi,

I appreciate that this is a super old thread but I am looking for the same kind of answer.

I have made my header transparent but the sections underneath are now moving up and they are partially blocked out by my nav bar that I cannot work out how to make transparent.

The nav bar is also sat 2 inches from top of page when I want it at the very top (with the logo added to the nav bar).

I am using venture theme.