queue  25
support
Results 1 to 2 of 2

Thread: Add mobile specific logo?

  1. #1
    Junior Member
    Join Date
    Jan 2018
    Posts
    2

    Add mobile specific logo?

    I am trying to add a mobile specific logo.

    The desktop version of my site has a round circular badge which works nicely on desktop and tablet, but mobile requires a different shaped version of the logo (rectangular). I've almost achieved by:

    1. In menu.php line 11 I've added <div class="desktop-logo"> to object "logo":

    <div class="desktop-logo"><?php $logo = $t->options->get("logo"); ?>

    <?php if ( ! empty( $logo ) ) : ?>

    <?php $t->image->retina($logo); ?></div>

    2. In custom CSS I've successfully hidden the desktop logo in mobile view, but the mobile specific logo won't display in it's place:

    @media (max-width: 320px) {
    #desktop-logo {display: none !important}
    #the-navigation a img {
    background : url('/wp-content/uploads/2018/01/BuiaFest-Logo-Mobile.png') !important;
    }
    }

    @media (min-width: 321px) and (max-width: 568px) {
    .desktop-logo {display: none !important;}
    #the-navigation a img {
    background : url('/wp-content/uploads/2018/01/BuiaFest-Logo-Mobile.png') !important;
    }
    }


    @media (min-width: 569px) and (max-width: 768px) {
    .desktop-logo {display: none !important}
    #the-navigation a img {
    background-image : url('/wp-content/uploads/2018/01/BuiaFest-Logo-Mobile.png') !important
    }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
    #desktop-logo {display: none !important;}
    #the-navigation a img {
    background : url('/wp-content/uploads/2018/01/BuiaFest-Logo-Mobile.png') !important
    }
    }

    I must be missing something simple.

    Can you help?

    Thanks!
    Last edited by Truffleweb; 01-27-2018 at 19:54.

  2. #2
    Administrator Donagh's Avatar
    Join Date
    Aug 2011
    Posts
    2,078
    Hi, Sorry for the delay, please share your website url and I'll take a quick look to see if its anything simple. As this is a customization, and hence beyond the scope of our support, I won't be able to provide a full solution for you, but i'll see if there's some quick fix I can help with.