Header options on different pages?

Question

css

The header is laid out on the bootstrap, it has several blocks and a large height, how to make it display them only on the main page? Something like

If not main { id\class
=display:none : \\hide some blocks,
id\class=height:200px ; \\ decrease height,
}

Answer 1

Crutches:
1) add a second class to the header and on the main add

<style>
.class{
height:200px !important;
}
</style>

In the main style file, specify the header parameters for other pages
2) As in the example above, only without the pathname, add to the main js
$('.header').css('height', '200');

Answer 2

if (window.location.pathname == '/')
doesn't work for some reason, I had to use the second crutch
$('.header').css('height', '200');