Header on Pages

Good Evening.

We are using the Ethos Stack X theme for our blog. On the Pages, there is a header bar that runs the width of the screen and melts into the right-hand sidebar. We want to keep the color of the sidebar as is, but want the header bar to be white like the rest of the page so it appears to be two separate columns which are a consistent look with our Posts. This only seems to happen on the pages and not the posts.

You can reference any of our posts, versus the following page example:

https://airsoftdomain.com/recommended-gear/

Please advise. Thanks.

Hello Justin,

Yes, we need some adjustment on the landmart header. You can add the following on yout Theme Options > Global CSS

header.x-header-landmark.x-container.max.width {
    background-color: #fff;
    max-width: none;
    width: 100%;
}
h1.h-landmark.entry-title {
    max-width: 1500px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

Those CSS means it will work on all pages and post.
In case you page it to work on pages only, we can use this instead:

.page header.x-header-landmark.x-container.max.width {
    background-color: #fff;
    max-width: none;
    width: 100%;
}
.page h1.h-landmark.entry-title {
    max-width: 1500px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

See this: https://screencast-o-matic.com/watch/cqXUelUpCp

The following might help:

Ok, but does this mean that the box for search will not look like an incomplete box as there is nothing above it…

Hi Justin,

I missed that part. We can reset current spacing too. You can add this too:

.x-header-landmark+.x-container>.offset>.x-sidebar {
    margin-top: 0px;  /*This is -35px by default.  Adjust accordingly*/
}

Hope this helps.

It worked. I am sure I may have missed this, but was there a way to reduce the amount of space between “Recommended Gear” and the top of the photo? Is there a space above the photo I can remove to bring the edge of the photo in line with the top of the sidebar? I think that would accomplish closing the gap.

Hi Justin,

Please remove previous suggestion and try this instead:

.x-container>.offset, .entry-content {
    margin-top: 0;
}
.x-header-landmark+.x-container>.offset>.x-sidebar {
    margin-top: 35px;
}

Then you got a headline right on top of the content. Please reset top margin by adding the class mtn on it. Like this:

<h2 class="mtn" style="text-align: center;"></h2>

The result should be like this:

For more changes, please check previous article as guidance.

How do I “add a class”

I didn’t get the same result.

Ok. I figured out how to do this in Chrome “inspect”, but I am not sure where to add the “mtn” class so that it is permanent.

Hi Justin,

I’m not sure why your Image is wrapped with <h2> tag.

Did you hard-coded this? If so, please remove that wrapping <h2 style="text-align: center;"> and </h2> tag, that is the reason why you have a gap above the image.

Thanks,

Hi. I haven’t hard coded anything. I wouldn’t even know where to find this.

The image is the first thing on the page before the text. Should this have been a featured image instead?

In that case, please provide us login credentials in a secure note so we can take a closer look.

Thanks,

I just figured it out. I am so sorry for that. Thanks.

Credentials did not work, please check.

I just also notice that you have Autoptimize running, please make sure to clear its caching everytime you made a changes. Or deactivate it until you finish developing the site. Sometimes your edits will not reflect immediately because of the caching.

Thanks,

Ok, I was able to remove the h2 tag and the issue on the Page is fixed. However, I am at a loss because now the Posts all have an issue with the search box being cut off. I will have to send you the credentials again.

Hi Justin,

I understand, but please write that search box being cut off issue on a separate thread, as this one is getting longer and hard to follow.

Thanks,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.