Capital Theme - Fixed header overlapping page problem

Store Design
1

Hello community,

I have a “fixed” header that is overlapping the page. looking for recommendations on how to fix this issue. I have used the code below to create the fixed header - Note I’ve used (Position: Fixed;)

Shop URL: LuckyinDesign.com

PW: liegla

Theme: Capital

/*Shadow under header */
#SearchDrawer { z-index:1001; } #shopify-section-header{
z-index:9000;
margin: 0%;
-webkit-box-shadow:0px 2px 4px 0px rgba(5,135,138,.3);
-moz-box-shadow:0px 2px 4px 0px rgba(5,135,138,.3);
-ms-box-shadow:0px 2px 4px 0px rgba(5,135,138,.3);
-o-box-shadow:0px 2px 4px 0px rgba(5,135,138,.3);
box-shadow:0px 2px 4px 0px rgba(5,135,138,.3);
width: 100%;
background: #ffffff;
Position: Fixed;
}

2 Likes
2

@Lucky07

oh sorry for that issue but i have check i can’t see any issue can you please show me

3

Hello @KetanKumar

I apologize, I had temporarily disabled the code causing the issue while I worked on a few things… I have enabled the code now. you should see my issue by visiting my site (luckyindesign.com) Thank you for any help or ideas on how to solve it.

1 Like
4

@Lucky07

Please add the following CSS to your assets/base.css bottom of the file.

@media screen and (max-width: 749px){
.main-content {
    background-color: var(--background-color);
    margin-top: 3em;
}
}

@media screen and (min-width: 750px){
.main-content {
    background-color: var(--background-color);
    margin-top: 13em;
}
}

Thanks!

5

Hi @Lucky07 ,

I checked and your site supports a fixed header so you don’t need to add any code it will work automatically.

Hope it helps!

6

@Lucky07

no rush can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px){
.template-index .main-content {
    margin-top: 30px;
}
.main-content {
    margin-top: 80px;
}
}

@media screen and (min-width: 750px){
.template-index .main-content {
    margin-top: 150;
}
.main-content {
    margin-top: 220;
}
}
7

Hello @KetanKumar

I pasted the suggested code to (Asset->/theme-index.min.css ) However I do not see any effect, no change.

8

Hi @Lucky07 ,

If you still want to use the code, you need to add px for it:

Screenshot.png
Screenshot.png1164×781 47.9 KB

Hope it helps!

9

Hello @LitCommerce

Adding the px worked on the home page. but the code doesn’t seem to work on any other page on my site. Any thoughts on how to implement the same code on all pages of the website? Thank you for noticing the px, I feel one step closer

10

Hi @Lucky07 ,

Currently you are adding code in theme-index.min.css file, you just need to move the code to custom.css file, it will work fine on all pages.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

11

Hello @LitCommerce

Yes, that worked perfectly… Thank you so much.

1 Like