[Resolved] Top Bar Reduces Post Header Spacing

[Rachel]

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

[Fernando]

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.

[Rachel]

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

[David]

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.

[Rachel]

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

[Author]

Posts