Mobile Menu Overlapping Logo

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #27993
    Nancy WinbergWpGirlD12
    Participant

    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.

    #27995
    VeenaVeena
    Moderator

    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;
    }}
    
    #28021
    Nancy WinbergWpGirlD12
    Participant

    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.

    #28025
    VeenaVeena
    Moderator

    Pls have the below custom CSS –

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

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Mobile Menu Overlapping Logo’ is closed to new replies.