Thats not a bug you just have to set the size for your image so it shows up properly on certain devices. Since everyone’s logo is different, you have to specify in your css how you want it to appear and adjust when viewed on smaller devices.
To fix this, you would need to look near line 4009 in your style.css file and change the width from 300px to around 360px or so –
.sidebar-primary,
.title-area {
width: 360px;
}
The reason it’s cut off is because the responsive section of your css kicks in and takes affect when the browser is either resized or viewed on a smaller resolution (tablets, phones, etc). So if the image is set to 300px and your image is wider than that size it won’t show. The way to fix this is to either change the width or have it set to be responsive/adjust no matter what size the browser is.
The logo area and the navigation are both in their own div/container. If they both exceed the width of the header (which is 1140px) the nav will fall off to the side since it’s not possible to have to divs that exceed the width. The width to the nav should be lowered to either a percentage or a smaller fixed width and then you’ll be able to have them both fit inside the header. You can find the code to change on line 3998 in your css. You can dabble with the numbers until you get it where you want. I’d start at around 50%. Right now its at 620px, so try and change it to look like this –
.content,
.site-header .widget-area {
width: 50%;
}
.
