Larger logos

If you want to use larger logos, you need to keep the menu size smaller (not too many items in order for the logo to fit). Insert your logo in the theme options panel and make sure that you set it's width (and also put a double sized logo for retina displays).

For the height, you'll have to do a bit of CSS tweaking, please see this example and use it inside the dedicated area for Custom CSS Code under the Theme Options Panel:

.f_height #logo, .minimal #logo {
   height: 222px; /* logo height + 110 */
}
.f_height #menu > ul, .minimal #menu > ul, .minimal #logo {
   height: 169px; /* logo height + 57 */
}
.f_height #menu > ul > li > a, .minimal #menu > ul > li > a {
   height: 169px; /* logo height + 57 */
   padding-top: 86px; /* logo height - 26 */
}
.f_width #headerWidgets {
   padding-top: 86px; /* logo height - 26 */
}
@media all and (max-width:940px) {
  #menu > ul {
    height:auto !important;
  }
}

This example is perfect for a logo width a height of 112px, but you can edit it after your needs for different types of logos. This is also written for future inquires on the topic: just use the code above and change the sizes with your own calculation of your logo height!

The code above should work for all types of menu layouts, so you can play with it and check out different results.

Final notice: Make sure that you don't have any caching plugins activated or that you clear the cache each time after you make changes to the custom css area, because the custom code might not appear if the page gets cached.