Front Page only Logo and Nav display none

Hello
I’d like to not display the header (Logo and Main Menu) but ONLY on the front page. I’d like it to be visible throughout the rest of the website.
I’ve tried this css code:

.home #header { display: none; }

but this removed the jumbotron section on the front page as well.

So I then tried the following code:

.home #logo { display: none; } .home #siteNav { display: none; }

But it doesn’t work, I’m assuming because it’s not strong enough to override the settings. Adding !important also did not work.

How can I get the Logo and Top Nav to not show only on the front page but show on all other pages?

Thank you in advance!

Website: http://ecocommunities.co.uk/

I have just tried this code and it worked for the navigation:

.home #header .top-header .header-navigation{ display: none; }

But for the logo it still doesn’t work

.home #header .top-header .header-logo img{ display: none; }

I guess I’m using the wrong element descriptor?

I figured it out!

.home #header .top-header {
display: none;
}

Simply had to widen the element section by removing .header-navigation

Leaving this here for anybody else who might need it in the future.

Hello there,

I am glad that you found the solution.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support