[Resolved] Post Pages Not Styling

[troyw]

Hi team,

Not sure why, but any Posts or Pages I create have no gap at the top of the page. Usually the content will sit lower down the page, but in this case they are not.
I shouldn’t need to, but to try to combat this I have created a Header Element. I have added lots of Padding and even a great big Header Image, then in Display Rules assigned this to All Posts, All Archives, even my Custom Posts. But no header appears and the content is up the top of the page.
Additionally, the Menu is Grey and not the transparent Black I have on the Home Page.

I don’t seem to have any control over the most basic positioning of my Posts or the Menu Style?

Any ideas?

[Elvin]

Hi there,

You can try adding a margin-top for the content area so gets pushed down to your preference.

Try this:

div#content {
    margin-top: 50px;
}

Or if you’re using a header element, if the element is merged, play around with the Offset Site Header Height value. 😀

[troyw]

Hey Elvin,

If I add `div#content {
margin-top: 50px;
}` it will push the content down,. However this then messes up the Home Page and I get that nasty Grey strip at the top of the page.

This might also explain why the Navigation is Grey on every page except the Home Page, but i don’t get how is this happening? I want the Navigation to be constant throughout the website and look like the Home Page, NOT Grey!

In an effort to understand why this SOLO theme is acting up like this, I have added Slider Revolution to the top of the Home Page. However, when i do this, I get that Grey stipe instead of the transparent Black Navigation?

So you can see the difference, I have created a clone of the home page called Home2 in the menu. The Home2 shows the menu correctly.

[David]

Hi there,

what was the purpose of the Header Element > Merged Header option, as this will pull the content up under the site header. If you can disable that and then i can take a look at the original issue.

[troyw]

I have disabled this now but still have same issue with the Post Pages. They are too high.
Just to be clear. The Home Page works fine now, but the Posts do not. even with that Header Element I added last night, the Posts sit at the top of the page and the Menu is Grey due to a gap a I believe?

[Elvin]

Do you still have any other Header Element, particularly, ones that are set to “merge” with display location assigned to posts?

Setting a Header element to “merge” will cause the issue because it sets the Header section to position: absolute; which effectively makes it overlay on top of the content. This also effectively pulls the content up as David mentioned.

Check this – https://share.getcloudapp.com/p9ukp41O

While the quick fix is by adding this CSS: (not recommended)

body.archive .header-wrap, body.post .header-wrap {
    position: relative !important;
}

I’d recommend removing the Header element instead as the “merge” option is actually the one adding the position: absolute; in the first place. 😀

If you’ve already removed the header element that’s merged, try clearing page caching if your server has one. 😀

[troyw]

Hey Elvin,
The problem is, the Header Element I am using is the default ‘Global Header’ that came with the Solo Theme and I like this header style. I like the Navigation transparency and the overall Layout.
Of course, I can make the Global Header only show on the Home Page and that solves the problem with the Posts and Archives, but how do I apply the same Header Set Up and Navigation we see on the Home Page, to the Posts and Archives?

[Elvin]

but how do I apply the same Header Set Up and Navigation we see on the Home Page, to the Posts and Archives?

I’m not exactly sure what’s the setup for the home page. (can’t recheck to refresh myself w/ it, the pages seems to be in maintenance mode). So I can’t tell if you should make a separate header element or just go with the CSS I’ve provided.

But yes, you can do multiple Header elements if you find it easier to deal with. 😀

[troyw]

Hey Elvin,
So I have done just that. I have made a copy of the Global Header Element. The Global Header Element is now assigned to only the Home Page. This looks great and is exactly what i want.

The Copy is assigned to all Archives and Posts, but as I have mentioned, it is not displaying the same as the Home Page Element is. It is pulling Posts Up and changing the Navigation Grey? Even though I have assigned a clone of the Home Page Header Element?

I want the Posts and Archives Navigation, to look the same as the Home page Navigation?

[Tom]

The reason it doesn’t look the same is that your archives/posts don’t have the slider you’ve added to the home page.

Have you considered adding a Page Hero Block Element to the Archives/Single Posts? This should get you a very similar look to the home page: https://docs.generatepress.com/article/block-element-page-hero/

Let us know 🙂

[troyw]

Hey guys,

I have added a header element now and finally seem to have it working. Not quite sure why it wasn’t working previously, but it is now.

One last question on this topic.
How do I add an image into the Page Hero. Instead of using text, I want to add a bit of code to call a PNG Logo to sit over the Background image?

Thanks

[Elvin]

How do I add an image into the Page Hero. Instead of using text, I want to add a bit of code to call a PNG Logo to sit over the Background image?

Adding images within the Header Element page hero can either come from a shortcode, or a custom HTML <img> tag.

you can add in <img src="url-path-to-your-logo.png" height="xxx" width="xxx" alt="" />

width, height and alt attributes are optional but I highly recommend filling them up for Google PSI performance result and SEO purposes.

[Author]

Posts