Overlapping Header on Policy Pages

[luxepalmer]

The headers on all my policy pages linked in my footer menu (refund, terms of service, privacy, and contact info) overlap the main text, and when I go into the theme settings, it appears that there’s no body text block at all. I attempted to ask Sidekick for help, which provided a bunch of different code solutions that didn’t work.

The headers aren’t sticky, and there isn’t any negative padding codes.

Sidekick tried having me add style attribute wrappings to my theme and base CSS, which only added a weird padding bar to my home page (even though I added an “only policy page” addendum).

Secondly, I tried changing the header menu color scheme, as it’s currently too pale to see, and the colors refused to change. Likewise, the page background color wouldn’t change.

How can I effectively edit the policy pages? Thank you!!

[luxepalmer]

Here’s an additional screenshot of the header settings:

[Moeed]

Hey @luxepalmer

This is happening because of the transparent header code you added for the homepage. You were supposed to wrap it in {% if template == 'index' %} condition but anyways, no problem. Add the code mentioned below and it will sort out your problem.

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>
.section-header, .header-wrapper {
    position: relative !important;
}
</style>
{% endif %}

RESULT:

---

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

[luxepalmer]

That worked great, thank you so much!!

Would you (or anyone) happen to know why I can’t change the color scheme on this page?

Thank you again!

[Moeed]

What exactly you want to change the color on the policy page and to which color? Let me know.

Best,
Moeed

[Maximus3]

The built in /policies/urls aren’t rendered by your theme templates, though they do inherit some of the most basic global theme styles like background color and font. There are a few different ways to change some appearances.
Depending on the theme, you could put something like this in base.css

body[data-page-type="policy"] {
  background-color: #ffffff;
}

A cleaner way is to use theme.liquid and put something like this

{% if request.page_type == 'policy' %}

<style>
  body {
    background-color: #ffffff;
  }
</style>

{% endif %}

Then try whatever css you want inside the style tags

[luxepalmer]

Thank you for the reply! Unfortunately, the background color won’t change with that code. It looks like this problem is happening on ALL our pages except for the home page. The header color scheme and menu color scheme should be dark, but they’re not turning up like that:

I have no idea why this has changed all of a sudden…

[Maximus3]

For that issue, it looks like you have a bunch of css at the bottom of base.css, one in particular

/* Overlay header on top of image banner */
.header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background: transparent !important;

This transparent background is what is making the background color not dark. So, if you aren’t doing the same as on the homepage (transparent header, image showing), this is causing the site background color to show through.
Important note - The above css rule doesn’t target any particular page, nor does it exclude a particular page, so it’s a global rule. What you’re saying is “Make all these rules apply to all pages”. You can change this to:

.template-index .header-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 20;
    background: transparent !important;
}
body:not(.template-index) .header-wrapper {
    position: relative;
    background: rgb(var(--color-background));
}

[luxepalmer]

You are truly fantastic, that worked perfectly!! Thank you so much for your help, I really appreciate it.

[Maximus3]

One thing I forgot to mention. Make sure your theme includes the template in the body class in theme.liquid.

Where it says

<body class=".......">

make sure it says this

template-{{ template.name }}

right before the end quotation marks. If it’s not there, add it right before the end ".