Header image and navigation bar overlap on smaller screens

hhndesai · Member · May 12, 2014 at 1:32 am
Copy link

Add topic to favorites
I have the Yoko theme and have customized it to add a logo at the top of the site (or, more precisely, it seems to be in the background). It looks fine on a laptop display, but on a tablet or a mobile phone, the logo and navigation menu overlap. Furthermore, the logo is cut off when the screen size is reduced. I would like the logo to scale down to the screen width and have the navigation menu show up under the logo. I’ve tried many things, but I think since the image (logo) is in the background, I’m not able to do anything about it. Any help appreciated!

Site is not public yet, but viewer access username is rbawebsiteguest and the p-word is westportct

The blog I need help with is: (visible only to logged in users)
hhndesai · Member · May 12, 2014 at 7:59 pm
Copy link
I made the site public temporarily, so no need to put in user/p-word. Hopefully I get some responses! Thanks.
thesacredpath · Member · May 13, 2014 at 3:41 pm
Copy link
Hi there, it seems you have for the most part solved this issue. I notice though that the logo gets cut off on the right at somewhere around 600px in browser window/device width. Add the following CSS to the end of your existing custom CSS. It is a media query that will set the logo image to resize so that all of it remains visible below 600px widths.
```
@media screen and (max-width: 600px) {
    #branding {
        background-size: contain;
    }
}
```

No items found.