Responsive logo

If you have a logo with a square aspect ratio and when the theme changes for the upper navigation bar the logo gets cropped, you can fix this with this CSS code.

Please paste the code inside the dedicated area for  Custom CSS Code under the Theme Options Panel:

@media all and (max-width: 980px) {
  #logo {
    height: 90px !important;
    width: 90px !important;
  }
  #logo img {
    width: 100% !important;
    height: 100% !important;
  }
}

If you have a large logo and there is an issue with the logo and the navigation that are crossing over each other on mobile display you can bypass this problem with a bit of custom CSS tweaking. Here is some code which can get you started (tweak it after your own needs): 

@media all and (max-width: 480px) {
.sidebar-show #sidebar .content {
   height: 180px !important; /*new header size */
}
.sidebar-show #content {
   padding-top: 180px !important; /* new header size */
}.
.sidebar-show #logo {
   left: 50%;
   margin-left: -77px; /* half size of the logo */
   position: relative;
}
.sidebar-show #menu .responsive-menu {
   position: relative;
   top: 0;
   right: 0;
}
#menu {
   float: none;
   left: 50%;
   margin-left: -100px;
   position: relative;
   width: 200px;
   margin-top: 20px; /* tweak the top position as you wish */
}
}

The code above will only run below 480px (as defined at the beginning - you can change this after your needs). It will increase the header's height and put the logo/menu in a stack position. Doing so, it will allow you to see the full logo and navigation as you wish.