Solved

Header is gone

Nato0201
Excursionist
49 0 4

Hey Team,

 

My header on my home page on mobile has vanished haha. It's visible on scrolling however not present at all otherwise.

 

Please help!

 

https://ap-perform.com/

Accepted Solution (1)
EBOOST
Shopify Partner
802 221 250

This is an accepted solution.

Hi @Nato0201 

 

Do you know why it's cut off the top part of the image? -> Have a margin-top: -105px here.

 

EBOOST_0-1715895899038.png

You can use code below:

 

sticky-header.header-navigation-wrapper {
  top: 0;
}
sticky-header-mobile.header-mobile{
  top: 0;
}
.scrolled-past-header .header-navigation{
  background-color:transparent!important;
}
.scrolled-past-header sticky-header-mobile.header-mobile {
  background-color: transparent!important;
}
@media (max-width: 767px) {
 
  body #shopify-section-template--22144887259424__16321237356a896dad{
    margin-top: 0!important;
  }
}

 

 

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST

View solution in original post

Replies 6 (6)

EBOOST
Shopify Partner
802 221 250

Hi @Nato0201 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file

sticky-header.header-navigation-wrapper {
  top: 0;
}

 

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST
Nato0201
Excursionist
49 0 4

Hi there, this hasnt worked unfortunately.

 

I've attached a screen shot of the current code in base.css

 

I have been altering the home and product page headers to allow it to be transparent but also be able to fit an image behind the transparent header.

 

Screen Shot 2024-05-16 at 8.06.26 AM.png

EBOOST
Shopify Partner
802 221 250

Hi @Nato0201 ,

May I suggest code below:

sticky-header.header-navigation-wrapper {
  top: 0;
}
sticky-header-mobile.header-mobile{
  top: 0;
}
.scrolled-past-header .header-navigation{
   background-color:#000!important;
}
.scrolled-past-header sticky-header-mobile.header-mobile {
  background: var(--bg-color)!important;
}

EBOOST_0-1715845689458.png

EBOOST_1-1715845714732.png

EBOOST_4-1715845862841.pngEBOOST_5-1715845890796.png

 

After scrolled

EBOOST_2-1715845736303.pngEBOOST_3-1715845760281.png

EBOOST_6-1715845914131.pngEBOOST_7-1715845945171.png

 

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST
Nato0201
Excursionist
49 0 4

Thanks for that code! Do you know why it's cut off the top part of the image? (dimensions are: Width x Height (638 x 870)px)

 

Also, is it possible to make the header transparent on the scroll and not black?

 

Thank you so much for all your help!

 

 

Nato0201
Excursionist
49 0 4

For mobile this is

EBOOST
Shopify Partner
802 221 250

This is an accepted solution.

Hi @Nato0201 

 

Do you know why it's cut off the top part of the image? -> Have a margin-top: -105px here.

 

EBOOST_0-1715895899038.png

You can use code below:

 

sticky-header.header-navigation-wrapper {
  top: 0;
}
sticky-header-mobile.header-mobile{
  top: 0;
}
.scrolled-past-header .header-navigation{
  background-color:transparent!important;
}
.scrolled-past-header sticky-header-mobile.header-mobile {
  background-color: transparent!important;
}
@media (max-width: 767px) {
 
  body #shopify-section-template--22144887259424__16321237356a896dad{
    margin-top: 0!important;
  }
}

 

 

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST