Genesis - How to adjust white space around header/logo

If you'd like to increase or decrease the white space above and below your header/logo image, we'll teach you how in this tutorial!

Before we begin, let's talk about margins. Margins in CSS create additional space around a particular element. You can have either positive margins (more space) or negative margins (less space). A positive margin would look like 20px and a negative margin would look like -20px. You can adjust the margin values to anything you need. The values do not need to be equal (i.e. you could have a margin-top of 30px and a margin-bottom of 60px, if you wanted!).

How to adjust white space around logo (desktop)

Go to Appearance > Customize > Additional CSS and paste the following code:

.header-image .site-header {     
    margin-top: -25px;     
    margin-bottom: -25px; }

Adjust the margin values as needed. To increase the margins, remove the minus sign before the number.

How to adjust white space around logo (mobile)

Go to Appearance > Customize > Additional CSS and paste the following code:

@media only screen and (max-width: 500px) {
    .header-image .site-header {          
        margin-top: -25px;          
        margin-bottom: -25px; } }

Adjust the margin values as needed. To increase the margins, remove the minus sign before the number.