Turning all my pages same like the header on my homepage

Store Design
, ,

Topic summary

A user sought help making their website header consistent across all pages, not just the homepage.

Solution Provided:
Another participant shared CSS code to be added to the theme.liquid file (above the tag). The code applies absolute positioning and white background on hover to headers on non-index pages, successfully resolving the initial issue.

Follow-up Problem:
After implementing the fix, the user discovered overlapping text between the header and content on support pages (like Terms of Service). Screenshots showed letters from page content appearing behind or overlapping with the header.

Current Status:
One respondent reported being unable to reproduce the overlapping issue. Another suggested removing custom code entirely and using Shopify’s Theme Customizer instead, noting that headers/footers are site-wide by default and can be managed through Admin > Online Store > Theme > Customize without custom CSS.

The discussion remains open regarding the best approach to resolve the overlapping content issue.

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

Hi! I need some help turning all my pages same like the header on my homepage. But I don’t know how.

this is my website.

Thanks in advance!

2

Hey @nothingchanges

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
{% if template.name != "index" %} 
<style>
header:hover {
    background: white !important;
}
header {
    position: absolute !important;
    width: 100% !important;
    max-width: 100% !important;
}
</style>
{% endif %}

RESULT:

image
image1906×918 168 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
3

Thank you! it worked!

1 Like
4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

5

Hi! I have another issue. ALL my SUPPORT TABS has overlapping letters with the header. How do I fix this?

Screenshot 2025-09-01 at 9.32.15 PM
Screenshot 2025-09-01 at 9.32.15 PM3420×1686 378 KB

Screenshot 2025-09-01 at 9.37.03 PM
Screenshot 2025-09-01 at 9.37.03 PM3419×525 11.6 KB

Thanks in advance!

6

I just checked and it looks completely fine on my end?

7

There are certain things that are, by default, the same for every page. This includes the header and footer. In your Theme Customizer, on the left column, you can see a clear dividing line between site-wide settings and page template-specific settings. I recommend that you remove any custom code you have done for your header, and go to Admin-Online Store-Theme-Customize. There you can see exactly what settings will be on all pages.