Top Spacing On Portfolio Page Not Working Properly With Pro Header

Support
#1

Hi Guys,

Just wondering if you can help me here.

On my portfolio page the featured images go up behind the header - I’m using Pro.

I’m assuming this is because of how I’ve got the margins set in the header to account for hidden, trigger sticky bars.

I’ve tried adding a class to the portfolio body area and then adding padding or margin to this new class, but it doesn’t do anything.

The only way I’ve managed to get the spacing right is by using this code:

.entry-featured {
margin-top: 5em;
}

The issue with this is that it adds margin to the top of every featured entry on the page and spaces each featured area out too much from the one below.

See screengrab 1 for issue:

See screengrab 2 for issue without the code:

Any advice on how I could account for the padding at the top between the entries and static header and also make the spacing between each featured entry nice and balanced?

I’ve included login details in a private note below

Cheers

Dan

#2

Hi there,

Thanks for posting in.

Please remove that CSS, instead please add this one.

.x-masthead {
min-height: 92px;
}

Your headers are sticky so setting the height through the builder may not work, instead, we set it in masthead wrapper.

Thanks.

#3

Hi,

Unfortunately this doesn’t seem to have made any difference.

I’ve tried both removing the original:

.entry-featured {
margin-top: 5em;
}

And then just usign your code

And I’ve also tried your code with the original code still in place, neither of which seem to make a difference.

I’ve also tried adjusting the height in pixels of the new snippet.

I’ve also noticed that it does add padding to my other internal pages at the top (on mobile), which is undesirable. I only want to add the padding for the portfolio pages

Any thoughts?

Thanks

Dan

#4

Hi Dan,

This happens because initial position of the bar on this specific header is absolute. This will not take a place on the browser. Please choose relative instead. No need to add any custom CSS.

Hope this helps.

1 Like
#5

Hi,

That worked perfectly. I feel a bit silly now lol.

First website I’ve used the Pro header on so still picking things up.

Thanks for your help here.

Regards

Dan

#6

You’re always welcome Dan!

Please visit our knowledge base here for more information: https://theme.co/apex/forum/c/themeco/kb

Cheers!