Resize header area like the Astrid demo

I’d like to resize my header area like the astrid demo theme.
You can see that my blog’s header is a little big and it keeps the same size even during the scroll page.

That’s my blog:

Thank you in advance.


Did you mean that you want to decrease the height of the header area?if yes, I think you’ll need to hide the site description for the blog page only

To hide the site description, you can put this CSS code to: Customize > additional CSS:

.blog .site-description {
    display: none;


Hello Awan, that’s exactly what I wanted, big thanks!

My search button have a big size and make my header area still big. then:
a) Has Astrid a search button which I can use? if yes, I’ll replace the current one.
b) In case that Astrid doesn’t have a default search button:
I’m using the “Bop Search Box Item Type For Nav Menus” plugin in my menu to show this little big button, can I change its size?

Thanks in advance!


This theme doesn’t have search form in the menu bar and according to your search plugin, you can decrease the size by using this CSS code:

.main-navigation .search-field, .main-navigation .search-submit {
    padding: 5px;
    font-size: 12px;