Archived topic
page content should be above the featured image
7 replies · Started by Regina on February 26, 2021
Hi Guys,
how do I get the site content directly under the main menu so that it is over the featured image? (I created an element with merge.)
https://www.psychotherapie-stasch.de/wordpress/zur-person/
I tried z-index, but it doesn't work:
.post-image-aligned-left>.featured-image, .post-image-aligned-right>.featured-image {
z-index: 1 !important;
}
.container.grid-container {
z-index: 2 !important;
}
Thanks in advance!!
Hi there,
You'll need to apply a negative margin top to the content itself so that the content moves up to merge with the featured image.
You could try this CSS for desktop, since it won't work well on mobile, even you set different numbers for mobile.
@media (min-width: 769px) {
#page {
margin-top: -30%;
}
}
It's quite creative, but I would not recommend to use this kind of featured image personally :)
Thanks a lot, Ying, but it´s not flexible.
I have to recreate an old html page in Wordpress. Maybe I should think of something else.
You are welcome!
This kind of layout won't be responsive enough, so yes I'll suggest to come up with a new idea :)
Hello again,
everything is ok with the design.
There is still a problem with the header of the mobile version for iPhone X (812 x 375 in landscape), as you can see in the Chrome Developer Tools. The container with the class .inside-header is above the navigation, which does not wrap nicely. The media queries are only set up to 768 pixels.
See the screenshot: 
or go to https://www.psychotherapie-stasch.de/wordpress/ and open the developer tool and iPhone X landscape.
Hope you understand. Thanks in advance!
Hi Regina,
Have you tried change the mobile menu break point?
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width
You could set another number other than 768px.
Let me know :)
Hi Ying,
I was looking for such a function, but unfortunately I could not find the breakpoint option, neither under primary navigation nor under mobile headers. Then I tried something around and activated menu plus, and then it appeared in the customizer. However, the mobile menu no longer works with the primary navigation and I want the very simple mobile menu.
Could this breakpoint not be activated independently of the primary plus?
I would also like a function under Elements, with which you can deactivate the featured image for mobile headers or activate an overlay only for mobile, because the featured image is in the mobile header under the title and makes it unreadable. ( I know, I can do it by css, but I think people need this possibility often.)
Unfortuanly breakpoint can only be changed when menu plus module is activated.
For the second question, I think CSS would be the solution.
Element adds background image by generating CSS as well.
Let me know if you need CSS help :)