Adding padding to top of portfolio page

Hello,

I need to add some padding to the top of my portfolio page. Due to how I have my menu setup the the portfolio sits behind the top of the menu so I need to push it down.

Please see attached screenshot, I have put a red arrow on the screenshot showing where I need to push the page down to.

Could someone please help me achieve this? Thank you in advance.

Hello @Underwood,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

Hi @Prasant, please see attached note

Hi,

To fix it, kindly change your css code that reads.

header.masthead {
   margin: 0px;
   margin-bottom: -150px;
}

with this

.home .masthead {
    position:absolute;
   width:100%;
}

Hope that helps.

Hi @paul.r

I just want to change it for that one specific page that I linked to you above (not the entire site)

Hi There,

You can add the following CSS rule instead.

.page-id-38 .x-container > .offset {
    margin-top: 60px;
}

Hope that helps.

Hi @mldarshana

Thanks for your help.

Do I just add this code into he customizer ‘global css’?

Hi @Underwood

Yes, you can add it into your Customizer’s Custom > Edit Global CSS area.

Hope that helps.

Hi @mldarshana , thanks for your help but I believe this code is causing some conflict with some of the other CSS I have added to the Edit Global CSS so it is not working. Please see the attached secure not for my all my current code in the Edit Global CSS.

Could you please advise? Thank you in advance, your paitence and help thus far is very much appreciated :slight_smile:

Hi There,

Your existing CSS rules have errors so that your newly added CSS also won’t parse. Please copy all of your CSS rules into an online tool like CSS Lint (http://csslint.net/) and correct your errors.

Hope that helps.

@mldarshana thank you so much! I fixed the CSS rules using the link you provided and your code worked perfectly.

One more question if I may? I now need to add top padding to the actual post post pages as I’m facing the same problem as before on these pages. Please see link as a note to show you what I mean.

Hi again,

Try adding the following code in your Customizer:

.single-x-portfolio header.x-header-landmark {
    margin-top: 147px;
}

Hope this helps!