Faq Page Padding Issue

Store Design
, ,

Topic summary

Issue: On desktop, the header overlaps the “Orders” section on the Help Center page (/apps/help-center). Mobile displays correctly. Screenshots show the overlap.

What was tried:

  • CSS tweak suggested: add to Assets/base.css
    @media(min-width: 750px){ body:not(.home-page) .section-header.shopify-section-header-sticky .header-wrapper{ position: sticky!important; } }
    Result: Did not fix the overlap; header still covers content.

Follow-ups:

  • Another suggestion to add code at the end of Layout/theme.liquid before ; however, the actual code was not visible in the post (only a screenshot), so the fix is unclear/unverifiable.
  • A different contributor asked if an app announcement bar was recently added and suggested contacting the app provider to fix the conflict. As a stopgap, they proposed inserting a Liquid wrapper before :
    {% unless template.name == ‘index’ %}
    {% endunless %}
    The snippet provided appears empty in the post; a screenshot shows a “result,” but details are not clear.

Status: Unresolved. No confirmed working solution yet. Key next steps: verify the exact code to place in theme.liquid, or address a potential app-level conflict (announcement bar) with the app provider to ensure proper desktop offset/padding on the Help Center page.

Summarized with AI on December 23. AI used: gpt-5.
1

Hello, when I open https://tunetoyz.com/apps/help-center there seems to be a padding issue. The orders part is covered by the header. Is there a way to move it down so that its not covered? Also this is the only page that is experiencing a problem and it looks fine on mobile just on PC

Screen Shot 2024-07-29 at 1.28.38 PM.png
Screen Shot 2024-07-29 at 1.28.38 PM.png2916×506 96.7 KB

1 Like
2

Hi @TuneToyz ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/base.css
  2. Add code below to end of file
@media(min-width: 750px){
  body:not(.home-page) .section-header.shopify-section-header-sticky .header-wrapper{
    position: sticky!important;
  }
}
1 Like
3

hey this doesn’t work the header is still covering the order part

4

Hi,

I don’t see code. However, I saw something error on base.css file. So you can add code below to end of file Layout/theme.liquid and before tag ( refer screenshot)

EBOOST_0-1722291408300.png
EBOOST_0-1722291408300.png1345×864 47.5 KB

5

Hi @TuneToyz

Did you add the app anouncement bar recently? Before you add you already have this problem? If yes, you need to contact the app provider so they can fix it. In meanwhile you can check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
{% unless template.name == 'index' %}

{% endunless %}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!