[Resolved] Page Hero issue

[troyw]

Hi guys,
I am using the below css to affect a specific page and element, however it is also affecting my home page, especially the menu.

.page-hero + #page {
margin-top: -100px;
}
I need this code and the element to only affect the link I have attached in Private info, but no where else on the website.

What it is doing is preventing the Menu presenting as it should by default on the Home Page when this code is removed? But if i remove the code, i lose the page affect on the other page.
Thanks

[David]

Hi there,

Are you using a specific header Element for the industrial electronics page?

If you are – the edit the Element – and in the Element Classes field add: hero-overlap

Then change your CSS to this:

.page-hero.hero-overlap + #page {
    margin-top: -100px;
}

If its not a specific header ( ie. being used on multiple pages ) then we can target just that page by its ID with this CSS:

body.page-id-904 .page-hero + #page {
    margin-top: -100px;
}

[troyw]

Thanks David, that was driving me crazy. This code worked a treat;

body.page-id-904 .page-hero + #page {
margin-top: -100px;
}

Cheers

[David]

Glad to be of help

[Author]

Posts