Archived topic

Top Bar Reduces Post Header Spacing

4 replies · Started by Rachel on October 16, 2022

Viewing posts 1–5 of 5

October 16, 2022 at 5:25 pm #2375680

Hi there

I have added a top bar using elements and blocks. The problem is that adding the top bar has reduced the space between my header/menu and the post title, which is also set up using an element - so they are now jutting up against each other.

I can't work out how to increase the spacing between the site header and post title when there is a top bar present (as it will not always be there).

It is most noticeable on mobile. Can you advise the best way to increase the spacing between header and post title when adding a top bar?

Thanks,
Rachel

October 16, 2022 at 5:40 pm #2375686

Hi Rachel,

Are you using a Header Element? If so, can you try increasing the top padding there on both Desktop and Mobile views?

Example: https://share.getcloudapp.com/6quGwX96

Let us know how it goes.

October 17, 2022 at 11:19 pm #2377030

Hi Fernando
I made this change (by increasing the top padding to 80 px on mobile) and it looks better.

But my other question is - is there an alternate way to do this as I assume this padding change would have to be manually updated each time the top bar is added or removed?

Is there a way for the post header to take account of the top bar?

Thanks,
Rachel

October 18, 2022 at 2:25 am #2377193

Hi there,

edit the Element that is displaying the Top Bar. In the sidebar settings theres a Priority field. Change that to 0 - this will hook it in above the header element so it doesn't take up any space inside it.

October 18, 2022 at 3:57 pm #2378134

Thanks David I think that has fixed the issue - I didn't know how those priorities worked and just found a video on it by Leo now that you have pointed it out - good to know!

Thanks for your help.

Cheers,
Rachel

This archived topic is closed to new replies.

Start building better websites today.