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.

How to adjust white space around logo (desktop)

DECREASE white space around logo on 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.

INCREASE white space around logo on desktop:

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

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

Adjust the padding values as needed.

How to adjust white space around logo (mobile)

DECREASE white space around logo on 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.

INCREASE white space around logo on mobile:

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

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

Adjust the padding values as needed.

Note: Padding and margin values don't have to be the same (i.e. both 25px). Feel free to adjust the values however you'd like – one could be 30px, one could be 15px. Optimal values will vary depending on your theme, logo, and header configuration. We suggest using the Customizer Preview to see how different values look on desktop + mobile and then adjusting from there.