Replace desktop logo with mobile logo when mobile

[Diego Letelier]

Hello,

There is any way to replace the logo? I have a sticky header for destop and mobile, it looks good only on desktop and tablets. On cellphones the logo looks too big. That is why I would like to have this logo replaced. Maybe that is the purpose of having two logos on customizer? What am I doing wrong? There is a picture of what happens and also my current CSS.

https://prntscr.com/s1qcbc

#top-bar{
background-color:grey!important;
}
#top-social ul li a {
color:white!important;
}
.agama-primary-nav,
#agama-logo img{
float: none!important;
display:inline!important;
}
.agama-primary-nav {
float: none!important;
left:26%!important;
max-width: 65%!important;
}
.top-links {
margin-left:37%;
}
#top-bar .pull-left{
float:none!important;
}
@media (max-width:992px) {
.sticky-header.sticky-header-shrink {
position: fixed!important;
height:80px!important;
}
nav.mobile-menu {
position: fixed!important;
width: 100%;
top: 80px!important;
height: 220px!important;
overflow: auto!important;
z-index:9999;
}
}
#footer-wrapper .site-info{
text-align:center;
width:100%!important;
margin:10px auto;
}
#footer-wrapper .social {
float: right;
}

Regards,
Diego

[Zex]

Hello, Diego!

Insert additionally following CSS codes:

@media only screen and (min-width: 993px) {
    #agama-logo .logo-mobile{
        display: none;
    }
}
@media only screen and (max-width: 992px) {
    #agama-logo .logo-desktop{
        display: none;
    }
}

Regards

• This reply was modified 3 years, 1 month ago by Zex.

[Diego Letelier]

Hello Zex!

It is the same as before. Something else that I should do?

This is how the new CSS looks like.

#top-bar{
background-color:grey!important;
}
#top-social ul li a {
color:white!important;
}
.agama-primary-nav,
#agama-logo img{
float: none!important;
display:inline!important;
}
.agama-primary-nav {
float: none!important;
left:26%!important;
max-width: 65%!important;
}
.top-links {
margin-left:37%;
}
#top-bar .pull-left{
float:none!important;
}
#comonace,
#cientifico,
#materiaprima,
#personas{
content:””;
display:block;
height:150px;
margin:0px 0 0;
z-index: -999;
}

@media (max-width:992px) {
.sticky-header.sticky-header-shrink {
position: fixed!important;
height:80px!important;
}

nav.mobile-menu {
position: fixed!important;
width: 100%;
top: 80px!important;
height: 220px!important;
overflow: auto!important;
z-index:9999;
}
}
@media only screen and (min-width: 993px) {
#agama-logo .logo-mobile{
display: none;
}
}
@media only screen and (max-width: 992px) {
#agama-logo .logo-desktop{
display: none;
}
}
#footer-wrapper .site-info{
text-align:center;
width:100%!important;
margin:10px auto;
}
#footer-wrapper .social {
float: right;
}

Regards,
Diego

[Zex]

Hi,

Try to replace the previous codes with the next one:

@media only screen and (min-width: 993px) {
#agama-logo .logo-mobile{
display: none!important;
}
}
@media only screen and (max-width: 992px) {
#agama-logo .logo-desktop{
display: none!important;
}
}

Can you give me an address to your website?

Regards

[Diego Letelier]

Ok, it works!

trawe.cl

Thank you!

[Author]

Posts