First you can change the height to 65px since that is the same height as your logo. This can be found around line 2044 and it looks like this –
.header-image .site-title a {
float: left;
min-height: 65px;
width: 100%;
}
Next I would reduce the padding on line 2064 from 40px to 10px –
.header-image .site-header .widget-area {
padding: 10px 0;
}
Now you’ll need to add some space on top and bottom of the logo and menu. You can do that by adding padding: 20px 0;
to line 1975 like this –
.site-header {
margin: 0 auto;
max-width: 1140px;
padding: 20px 0;
}
To have your logo center on Mobile devices just add the following code to the Responsive section of your CSS file. It should be after line 4077 and added inside the section labeled –
/* iPads (portrait)
--------------------------------------------- */
@media only screen and (max-width: 1023px) {
You can add this code in the section above
.site-header .site-title a {
background-position: center top !important;
float: none;
}
I know that seems like a lot, but this is the way it has to be done in all Genesis themes since everyone has a different logo size. Some want their logo large, small, centered, floating to the left, etc. So that’s why we have to customize the CSS to get it working the way users want it.
Here is how everything should look once you make these customizations – http://i.imgur.com/N5iusoy.png
Here is how it will look on mobile devices –
http://i.imgur.com/weUGbGT.png
Let me know if you get everything working. If you need me to login and quickly add these in for you just let me know.