Header and page overlapping issue

New Member
4 0 0

I made the header of my page transparent, the only way, to my knowledge, to do this was to make the position absolute. Home page looks perfect from this. So I did that, and then when I open up a page such as "Contact Us", the page "ignores" the header and overlaps it. 


So my first idea to fix this was to add some padding of course. So I added this code:

}.section-header.text-center {
padding-top: 60px;


Everything looked fine, until I did notice the padding did move the text on my page slightly when navigating from the home page to another page, such as "contact us". An additional problem was that when viewing the page on a mobile device, there is still an overlap between the page content and the header, even after adding the padding.


Would anyone here smarter than me on this coding be able to give a solution?

My page: spuroutdoors.com

Replies 2 (2)
Shopify Partner
9209 1564 1929


Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px){
.section-header.text-center {
    padding-top: 60px;
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
103 0 35

Hi, a very old post I know but if you are still active can you tell me if you sorted this?


I am having exactly the same issue - made my header transparent and now the default homepage has other sections up in the header section (almost like i deleted the section and not made it transparent)