Reduce header’s height in Hydrogen & Kryptonite (2)

This post is an update to a previous post about both Hydrogen and Krypton which is now outdated (Hydrogen has been completely rewritten to be bundled in Sandvox 2).

Let’s say we want the header to be 120px tall. For Kryptonite and Krypton Pro, nothing has changed:

#title {height:120px;}

For Hydrogen the situation has become slightly more complex and we need to do some math because more elements are now involved. 120px means we want the header to be 60px shorter than its default 180px height. So we need to subtract 60px to some default values.

These are the defaults:

  • height for #title h1 and #title h1 a is 180px (180-60=120)
  • height for #title is 135px (135-60=75)
  • position for #title p is top:180px (180-60=120)

Hence, this should be the code:

#title h1, #title h1 a {height:120px;}
#title {height:75px;}
#title p {top:120px;}

Here is another example. This is the code to change the header to 140px:

#title h1, #title h1 a {height:140px;}
#title {height:95px;}
#title p {top:140px;}