Mobile Menu Overlapping Logo

[WpGirlD12]

Hello,

I just uploaded a new logo file for the menu bar of my site. I use the Austin Theme and find that the mobile menu button now overlaps my logo when I view it on my cell phone. On all other devices it looks great. This logo file measures 313px wide by 46px high. It has a script font so I am afraid if its too small it will lose readability. Is there some code I can get to place the menu button in a better location when viewed on mobile screens? Perhaps it can be moved to the second line with the social media icons? Here is my site http://nancywinberg.com/

Thanks for your help,
Nancy W.

[Veena]

Pls try the below custom CSS in themeoptions –

@media only screen and (max-width: 767px){
#sidebar-header .social-list {
    top: 10px;
}
#site-logo {
    top: 30px;
}}

[WpGirlD12]

Hello,

When I entered this code into my website, it caused the menu icon to align to the top of the cell phone screen and everything else in the header shifted downward, leaving a blank space along the top edge. This layout does not look very good to me. I would like the menu button to either share the same vertical alignment as the social icons or go beneath all the content in the header centered in the middle. Is this possible or should I just shrink the size of my logo file?

Thanks for your help,
Nancy W.

[Veena]

Pls have the below custom CSS –

@media only screen and (max-width: 767px){
img.standard-logo {
    margin: 0 auto;
    max-width: 80%;
}}

[WpGirlD12]

Thank you for this CSS code. I inserted it into my site and it solved the issue.

[Author]

Posts