Hi,
I have this post example that I want the featured image to be full width across the page.
https://staging2.rdw.co.nz/team-member-alec-dunn/
How can I achieve this?
Thank you for writing in, this is not possible on the Post Content area without template customization. However, you can do this in the header area.
What you need to do is duplicate your current Header and assigned that duplicate to All Posts, edit this duplicate header and add another bar on it.
Now, as you might already know, you can apply a background-image to the Bar, but do not use a static image, use the Dynamic Content feature to use the post’s featured image as the background.
More details about Dynamic Content
Hope it helps,
Cheers!
Hi @friech, I’m close… but it needs a bit of tweaking. Can you help, please?
https://staging2.rdw.co.nz/team-member-alec-dunn/
I also need to remove the Featured Image from the actual post.
Please clarify what tweaking you need, if you need to increase the bar height, you can do that, inspect the Bar and see the Height option.
To hide the featured image that is on the content, please add this to the Theme Options > CSS
.single-post .entry-featured {
display: none;
}
If you are wondering how I came up with that custom CSS, You can find the proper CSS code selector using the Chrome browser Developer Toolbar.
For the CSS code itself, I suggest that you get started with this tutorial
Hope it helps,
Cheers!
Hi, thanks for your help. I’m also most there, but I can’t figure out how to put my navigation on top of the featured post image.
My set up at https://staging2.rdw.co.nz/team-member-alec-dunn/ is a 2 bar setup (logo and nav in bar 1 - featured post image in bar 2) in my header.
Here is the example of what I’m trying to achieve https://www.tftconsultants.com/experts/alan-pemberton/
Hey @FoundationDesign,
This is only the z-index issue, please inspect your Bar that contains the navigation element, under Setup increase the z-index value to 99999 (see screenshot)
Let us know how this goes!
We are delighted to assist you with this.
Cheers!
Hi, I’ve found another issue with my header. Is it possible to have the rollover effect (transparent to solid blue) be activated when the pages scrolls up.
Again, like in this example… https://www.tftconsultants.com/experts/alan-pemberton/
Yes you can, please duplicate your sticky bar, make the original bar not sticky (with transparent background).
And keep the duplicate bar as sticky bar and check the Hide Initially option, then set this duplicate bar background to solid blue.
With this, you will now have 2 bars that you can style/design separately, one bar as a static bar, and one bar as the fixed/sticky bar that only show when the user scroll
Hope it helps,
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.