Mobile nav menu messed up

[fatcatgraphics]

Hey,
For this website I have created at https://mmcproductions.com, have created a custom nav bar/logo bar with this css:

.x-brand.text {
display: none;
}
.x-navbar {background-image: url(https://mmcproductions.com/wp-content/uploads/2018/05/MMC-productions-Logo.png), url(https://mmcproductions.com/wp-content/uploads/2018/05/Logo-background.png);
background-position: left, left;
background-repeat: no-repeat, repeat;

It looks good but when i view it on mobile and click on the mobile menu the drop down menu is all messed up. Do you have any idea on whats causing this or how to fix it? I appreciate any help.
Thanks!

Rena

[thai]

Hi There,

Please try adding this custom CSS:

@media (max-width: 979px){
    body .x-navbar {
        background-position: left top;
        background-size: 60% 160px;
        background-repeat: no-repeat;
    }
    body .x-nav-wrap.mobile {
        padding-top: 50px;
    }
}

Hope it helps

[fatcatgraphics]

That worked sorta. While now the drop down menu looks good the nav bar with logo looks messed up on a phone and theres extra black spacing around the top and bottom… I tried messing around with the css but I cant get it right. Can i give you my login info??

Rena

. [quote=“thai, post:2, topic:33699”]
@media (max-width: 979px){
body .x-navbar {
background-position: left top;
background-size: 60% 160px;
background-repeat: no-repeat;
}
body .x-nav-wrap.mobile {
padding-top: 50px;
}
}
[/quote]

[rad]

Hi @fatcatgraphics,

Looks like there is no perfect solution for this. The black area appears since the background image (which is the logo) doesn’t cover everything. Hence, the background color will be visible for an area that can’t be covered by the background image.

How about adding your background image without the logo so it could cover the entire area. Then use PNG logo with transparency just to cover the upper part? You may consult it to a web designer for proper implementation.

Thanks!