pushing page content down on product pages

Shopify Partner
29 0 3

I am customizing the Brooklyn theme. I have added a background color to the nav menu and it looks fine on all pages except the product pages, where it is overlapping the images. I tried adding padding-top: 30px inline to the product.liquid, and it looked fine on the large screen, however in the mobile view it is still an issue.

I am assuming there is a better way to solve this... Can anyone advise me the best way to push the page content down on the product pages in all screen sizes? 


Thanks for any help!

Shopify Staff
Shopify Staff
370 0 29

Hello Julia, Ben here - your Shopify Guru! 

 Put this somewhere on your product.liquid:

  .main-content { padding-top: 120px!Important; }

That will pad all of the product content including the image. Should be just right for mobile as well. 

I hope this helps! Feel free to reach out if you have any further questions :)

Ben C - Shopify Guru

Shopify Partner
29 0 3

Wow. You are awesome, thank you! Worked great.

New Member
5 0 0

Hi Benjamin,


I have related issue in my store, am using Venture theme, When i open in mobile view menu's and background content are overlapping. 


Please find the attached screenshots.


82f752a2-e2ff-4002-8497-53de6f7ae38a (1).jpgIMG_3149.jpegIMG_3150.jpeg