Featured Image In Header Not Positioned

[guybower1]

hi
I wish to create a custom header for my posts pages. What I am after is a transparent topbar, then a solid black menu bar, the post title and the last thing is the featured image.

I have duplicated the header which I use for the rest of the sit. This header contains the topbar and menu bar. I have now added another bar and in the container, I have used dynamic content for both post title and featured. The problem I have is where the featured image appears. Instead of sitting 4th in line, it comes up to cover the menu bar, the topbar and even the slider above.

Is there a way to have the featured image sit where it should, above the post content?

URL in a secure note

Regards

[christian]

Hey @guybower1,

@guybower1

Is there a way to have the featured image sit where it should, above the post content?

Yes. You just need to know Flex. You can learn Flex here https://theme.co/docs/use-flex-layout

For your setup, you first need the height of the bar to auto.

Reverse is currently enabled in your Container Flex setup that’s why you see the image on the left and title on the right. You need to disable Reverse then enable Column.

Hope that helps.

[guybower1]

Hi Christian

I made the adjustments and the featured image now sits below the menu bar, but unfortunately the blog title still sits to the right of the featured item. It has also caused the sticky menu bar to not stick until after the featured image, yet that menu bar is above the image. The menu bar should stick when it reaches the top of the page. In fact, very little is as it should be and it is quite frustrating. Here is a sample post page

http://wordpress-102462-558755.cloudwaysapps.com/culture/chinese-new-year/

I have a sidebar set for all posts pages, yet the featured image and blog title sit above that. In addition, the original featured image is still there underneath this with the post title sitting hidden behind the menu bar

I had laid this out in another post but it was suggested to create a new post about this, which I have done.

This should not be so difficult, but posts pages are handled extremely poorly in Pro.

This is the aim for ALL posts pages (not the post index page)

1. Slider sitting above the masthead (done)
2. Transparent topbar sitting on the bottom of the slider (done)
3. Black sticky menu bar below the topbar ( this was done and behaving correctly until now)
4. Post title sitting below the sticky menu bar (along side the sidebar)
5. Featured image below the post title (along side the sidebar)

With 4 & 5, all posts pages have a sidebar set, so 4 & 5 should be sitting alongside the sidebar, not on top of it.

What is so difficult about this setup in Ethos?

[rad]

Hi @guybower1,

For the image and title, the container’s flexbox is still set to row, please set it to column. Please check this screenshot

The sidebar is different than the header, it has a different layout than the header.

3. It’s sticky, but covered by other header bars. Please check this screenshot.

What you need to do is change the z-index value of the sticky header, please check this screenshot, please set it to 999999

4. Would you mind providing more clarification of 4? Is it related to 3? Because once the z-index is changed, the sidebar appears under that menu. Or do you mean the first issue mentioned on this thread? If yes, then after you set your container’s flexbox to column, please unticked the reverse option. As you can see from that screenshot, it still set to reverse, Christian also suggested to toggle off that option with X mark, his recommendations aren’t applied. Setting it to the column without reverse option will make the title under the sticky bar. In case it’s a bit confusing, here is a video recording. https://www.dropbox.com/s/5ud4zft4lfzdsjc/bandicam%202020-06-11%2022-52-27-606.mp4?dl=0

5. The sidebar is a content sidebar, so it’s only relative to the content layout. It will not stick beside the header where featured image and title is. The solution is making your sticky sidebar sticks at page load and not just on page scroll, this means, you can position the sticky sidebar above the content layout and beside the header at the very beginning as the page loads.

It’s not due to stack, but with configuration which currently not properly setup. But I understand that the options are quite overwhelming, same on me at my first time using it but should be worth it once you familiarized the options.

Thanks!