Genesis - How to adjust white space around header/logo

If you'd like to increase or decrease the white space around your header or 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. For example, 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 (i.e. 25px instead of -25px).

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 (i.e. 25px instead of -25px).