Shop Categories

X

Replace desktop logo with mobile logo when mobile

Home Forums Agama Pro Replace desktop logo with mobile logo when mobile

Topic Resolution: Resolved
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26300
    Diego Letelier
    Participant

    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

    #26301
    Zex
    Moderator

    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 2 years, 7 months ago by Zex.
    #26369
    Diego Letelier
    Participant

    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

    #26370
    Zex
    Moderator

    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

    #26372
    Diego Letelier
    Participant

    Ok, it works!

    trawe.cl

    Thank you!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.