[Resolved] Creating a Single Post Layout

[Sunny]

Hey,

I wanted to create this type of (https://prnt.sc/v2tlhn) single-page layout look for my blog but with a sidebar on it…

But how can I create it?

Currently, my website has this look => https://prnt.sc/v2tnbu

Here I’m also sharing the website link (https://thewpx.com), please let me know how can I create a similar design using Generatepress.

[David]

Hi there,

It will require a few steps.

First create a new Header Element for the Blue Background:

https://docs.generatepress.com/article/header-element-overview/

Add this to the content:

<!-- single post hero -->

Set the top Padding to around 300px – this will define its height.
Set the background color to the Blue you want.

Then go to the elements site header tab and set the Header to Merge with Content, you can then enable Navigation colors and set the navigation background to transparent and the menu item colors to white.

Set the Display Rules to Single Post.

Once thats done go to Customizer > Layout > Blog >> Featured Images >>> Post and set the Featured Image location to above title.

Once thats done let me know so i can look at the necessary CSS.

[Sunny]

I’ve done this with the specific page I shared in the private information. You can take a look at this – but I don’t find any option to enable “merge with content”.

Instead of this, it is only showing “merge, no merge, and merge on desktop” options. When I activate the “merge”, it changes the overall header color to blue and after enabling the navigation color and setting the desired colors, the background color of the header (not primarily navigation) isn’t changing (it remains to blue).

So, I’ve to overwrite it by adding the background-color CSS in .header-wrap to make the header color white (#e7f2f7).

Let me know if I followed the steps correctly or if I need to do other changes and also share the CSS through which I can get similar design.

[David]

If you want to keep the header/nav the same color as the rest of your site, then DO NOT enable the Merge option.

To create the overlap add this CSS:

.header-single-layout + #page {
    margin-top: -150px;
}

It will only apply to posts that have the header element with the header-single-layout element class

[Sunny]

Hey David,

I’ve done the settings accordingly and it works great… I’ve also made some changes, so it looks more similar….

But the thing is, now the current-menu-item CSS isn’t showing on the menu item of the post. Rest it works perfectly.

Any solution for this?

Also, another issue that I got on my website (another issue) is, when people refresh my web page on their device for 1-2 times, the logo and menu items got changes to two different lines.

Here is the screenshot => http://prnt.sc/v4lp81

So can you please suggest me any solution for this as well?

And thank you so much…

[David]

Looks good 🙂

Posts don’t recognise the Blog is their parent in the navigation menu.
You could change your CSS to this:

.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.single-post .main-navigation .main-nav ul li > a[href*="blog"] {
    color: #ffffff;
    background-color: #233c65;
}

Then any Single Post will highlight the Blog menu item.

The logo issue is because its being lazy loaded.
Most lazy loaders allow you to exclude images using a CSS class. You can use: is-logo-image

[Author]

Posts