Making section start below header in pages only

Store Design
,

Topic summary

A user encountered an issue where page content was overlapping with the header on their Shopify store, but only on internal pages—not the homepage. An attached screenshot illustrated the problem.

Multiple solutions were provided:

  • Add CSS code to theme.liquid before the </head> tag using conditional logic ({% if template contains 'page' %} or {% if template != 'index' %})
  • The code adjusts header positioning and adds top margin/padding to the main content section
  • Solutions targeted both desktop and mobile views with media queries

Resolution:
The original poster confirmed one of the solutions worked after testing, resolving the overlap issue. The discussion is now closed with a successful outcome.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Dear all,

Can anyone assist me with making the pages show below the header?

This needs to be done only in pages and not on landing page.

Currently it’s overlapping as per attached picture

1000015331.jpg
1000015331.jpg1080×2138 200 KB

Would be really appreciated.

Website: https://b6c7e8-65.myshopify.com

Pass: test

Kind regards,

Lisa,

1 Like
2

Hi @Lisavdijk , Add the below code to your “theme.liquid” before tag.

{% if template contins 'page' %}
{% style %}
#MainContent section:first-child {
    margin-top: 80px;
}
{% endstyle %}
{% endif %}

AT…

3

Hello @Lisavdijk

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ h2.rich-text__heading.rte.inline-richtext.h2.scroll-trigger.animate--slide-in { padding-top: 54px !important; } }

Tech_Coding_0-1727774661229.png
Tech_Coding_0-1727774661229.png317×542 27.4 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

4

Please add this code to theme.liquid file, after in Online Store > Themes > Edit code

{% if template == 'index' %}
@media (max-width: 990px) {
    body .header-wrapper {
        background: transparent !important;
        position: absolute !important;
        width: 100% !important;
        top: 0px;
    }
}
{% else %}
@media (max-width: 990px) {
    body .header-wrapper {
        position: relative !important;
        width: 100% !important;
        top: 0px;
    }
}
{% endif %}
5
  • Here is the solution for you @Lisavdijk
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
{% if template.name != "index" %} 

{% endif %}
  • Here is the result you will achieve:

BSSTekLabs_0-1727875094807.png
BSSTekLabs_0-1727875094807.png376×814 40.2 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
6

Hi all,

Sorry for my late reply, had a busy week.

This worked, appreciate your help :slightly_smiling_face:

Kind regards,

Lisa

1 Like
7

Glad to help you. Have a good day.

1 Like