Archived topic
Hero Featured image problems
3 replies · Started by Streater on June 18, 2021
So I've run into several issues with the hero featured image... I've spent the whole day trying to debug it from solutions I've searched on here... nothing totally solved the problems.
I know I should create a different ticket for different problems but they may all be related... I think 1 and 2 are related... 3 is more for you reference for what I am trying to accomplish and I should do another ticket.
1) The image is pushed up the page under the navigation bar to the point where you only see the bottom of the image. I can bring the image down with a padding of 500px.... but that seems odd that I'd have to even do that... tells me something isn't working properly.
2) The image is so large it takes up the whole screen... I happened to have found a PHP solution to this on here that seemed to have worked... but I had to restore backup on my site and lost it.
3) The header pushes down my sidebar. I want my sidebar that has an opacity of 0 to overlay on top of my image. You can see what I am trying to go for in the link to my current site. I built that with DIVI and I was able to accomplish this by making a left margin of -300px. Can't really do that here if the sidebar is pushed down the page.
I also tried not using the create elements and using CSS to get the featured image fullwidth. While the sidebar does stay in place... I could only get the image so wide... I couldn't get it fullwidth.
Any ideas?
Hi there,
1 and 2. Header Elements by default are an empty container and the image is placed as a CSS background. The height if the header element will be defined by its contents and/or the top/bottom padding.
If you want the image as per the DIVI example, then remove the background image, and below the Title HTML add the following template tag:
{{custom_field._thumbnail_id}
This will add the <img> to the header content. You won't need padding to resize.
3. You're using this CSS to fix the sidebar:
.inside-left-sidebar {
position: fixed;
z-index: -10;
} You can change it to this:
.inside-left-sidebar {
position: fixed;
z-index: 100;
top: 0;
}Adjust the top: 0 position eg. top: 40px; will move 40px down from the top of the screen.
Wow unbelievably perfect! Thank you so much!
Glad to be of help!
