Mobile Header Keeps Getting Hidden by Announcement Bar

Solved
Tourist
7 0 0

Hi! We're using the Modular Theme and for some reason our header at Pyknic keeps getting pushed up behind the announcement bar once the page loads on mobile. I've tested the site out on iPhone Safari and Google Chrome and the header gets cut off on both, which makes it very hard to access the hamburger menu or cart and see the logo.

 

I don't know much about code but I've accessed style.scss.liquid and tried plugging in a huge number in a bunch of different /media screen/ spots and nothing seems to fix it (don't worry, I changed those numbers back!).

0 Likes

Hello ,
Please share your site url.
So that i can check and provide you exact solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
7 0 0
Pyknic dot com - sorry last time I wrote out the domain on the main post, it was flagged.
0 Likes

Success.

Hello

1. Go to Online Store->Theme->Edit code
2. Asset->style.scss->paste bellow code in bottom of file

@media screen and (max-width: 1024px) {
#header.shift--alert {
	top: auto !important;
}
}

 

 

 

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
7 0 0

That did the trick! Thank you so much :)

 

@oscprofessionalfor all the non-home pages like say "womens tees", for example, why is the header a lot lower when the page is loaded? Is there a way to push these up to match location of the homepage? Thanks!

0 Likes

@pyknic,

Add below css

@media (max-width: 549px) {
 .template-collection .page-title,
 .template-page .page-title,#shopify-section-product-template {
  margin-top:50px;
  margin-bottom:50px
 }
}

@pyknic wrote:

That did the trick! Thank you so much :)

 

@oscprofessionalfor all the non-home pages like say "womens tees", for example, why is the header a lot lower when the page is loaded? Is there a way to push these up to match location of the homepage? Thanks!


 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
7 0 0

Just added that code and it's giving more space between the logo/menu/cart and the page title but the logo/menu/cart is still a lot lower below the announcement bar on the pages than it is on the homepage.

0 Likes

Success.

@pyknic,

Add below css

@media screen and (max-width: 1024px) {
.template-collection #header.shift--alert,
 .template-page #header.shift--alert,.template-product #header.shift--alert {
  top:10px !important;
 }
}



 


@pyknic wrote:

Just added that code and it's giving more space between the logo/menu/cart and the page title but the logo/menu/cart is still a lot lower below the announcement bar on the pages than it is on the homepage.




Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
7 0 0

Case closed. You're a legend!

0 Likes