1- “what is displaying in the upper left corner ” You probably forgot to check the option “Hide on Phones” which is below the “Hide Site Title/Tagline” one.
2- You have added an invalid rule in the image style attribute: left=180px , so it does nothing.
Remove it and explain what you were trying to do with it.
Remove it and explain what you were trying to do with it.
3- I think you need to change the treshold value in the @media rule to 768px and you need to add a rule to improve the logo overlay when stacked (see below)
@media only screen and (max-width:768px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2 {width:100%;}
#text-9 img {top:-20px;} /*-moves logo down on mobile*/
#sidebar_header .header-widget-2 {min-height:160px;} /*-Prevents the logo from overlapping the menu too much on mobile*/
} /*Change the 500px threshold to what you want */
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2 {width:100%;}
#text-9 img {top:-20px;} /*-moves logo down on mobile*/
#sidebar_header .header-widget-2 {min-height:160px;} /*-Prevents the logo from overlapping the menu too much on mobile*/
} /*Change the 500px threshold to what you want */
You may also want to reduce the logo width when stacked, is so do it with modified rules like below
@media only screen and (max-width:768px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2 {width:100%;}
#text-9 img {top:-20px;width:130px;} /*-moves logo down on mobile*/
#sidebar_header .header-widget-2 {min-height:100px;} /*-Prevents the logo from overlapping the menu too much on mobile*/
} /*Change the 500px threshold to what you want */
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2 {width:100%;}
#text-9 img {top:-20px;width:130px;} /*-moves logo down on mobile*/
#sidebar_header .header-widget-2 {min-height:100px;} /*-Prevents the logo from overlapping the menu too much on mobile*/
} /*Change the 500px threshold to what you want */