[Resolved] SVG Logo not display on mobile

[remzi]

Hi,

I am using svg logo, everything good but on mobile the logo not display.

http://www.vemavi.com

I am using;

.site-logo img {
width: 400px;
height: 100%;
}

@media ( max-width: 768px ) {
.main-navigation {
background-color: #1D71B8;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
color: #FFFFFF;
}
.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li > a:focus,
.main-navigation .main-nav ul li.sfHover > a {
color: #FFFFFF;
background-color: #1e72bd;
}
}

Thanks

[Leo]

Hi there,

The logo is displaying, just that it’s blended in with the white background.

Try this CSS:

@media (max-width: 768px) {
    .site-header {
        background-size: auto;
    }
}

[remzi]

ok good but still something wrong. can you check again on mobile

thanks

[Leo]

What’s wrong? Keep in mind that background images are not responsive by nature.

[remzi]

my fault. I needed to convert logo font

work perfect. Thank you

[Leo]

No problem!

[Author]

Posts