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
9175 1561 1926


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. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | 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)