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



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;
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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit