Okay
  Public Ticket #1004309
Different logo in mobile
Closed

Comments

  •  5
    JuanDosCuartos started the conversation
    December 30, 2016 at 5:38pm

    Hi there, Salient freshman here and glad that we purchased! :)

    Ok, so while I managed to correctly set the logo for the desktop versions, I'd like to have a "shortened" version of our logo on mobile devices.
    How can I set such different version of the logo to appear on mobile (specially phones – I don't mind that much on bigger tablets–) rather than the current desktop one?

    Thanks a lot! :)

  •  9,001
    Tahir replied
    January 2, 2017 at 2:42pm

    Hey Juan,

    Sorry for the Weekend Delay. Wish you the Very Best in this New Year. 

    I am afraid we dont have any such Option in the Theme to have a Separate Mobile Menu . Though have noted it in the Wishlist for upcoming updates. 

    Bes.t

    ThemeNectar Support Team 

  •  5
    JuanDosCuartos replied
    January 3, 2017 at 3:25am

    Thanks! No worries, No delay in fact, it's been a well deserved days off for sure. ;) I hope you have an amazing 2017 too!

    Glad to see this feedback going in the wishlist.

    However I'd still like to ask if there could be some workaround like a custom CSS that limits or scales or does something like this with the very same logo file (no need to have two spare files). Like having just that one .png file logo and the CSS says "respect this size for desktop, scale to "x" pixels wide for tablets and go for "y" size when displaying on phones"....

    I'm no code guy (just the very very initial basics) and maybe I'm talking nonsense; apologies if I do so...

    Thanks for helping out! :)


  •  9,001
    Tahir replied
    January 3, 2017 at 5:09pm

    Hey Again,

    This will place a white background and overlap the logo on mobile .

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width:690px) and (min-width: 1px) {
    #logo:before {
        content: '';
        width: 180px;
        height: 30px;
        left: 120px;
        position: absolute;
        display: block;
        background-color: #fff !important;
        z-index: 9;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  5
    JuanDosCuartos replied
    January 4, 2017 at 1:46pm

    Hi Tahir, I appreciatte your help. That's what I wanted! :)

    Now, may I ask how to achieve the same but for tablets (iPad, i.e.) in landscape mode?
    It looks fine when in vertical-portrait but now the logo and the menu overlap each other.

    Please find attached a visualization for convenience.

    Thanks a lot!

  •  9,001
    Tahir replied
    January 4, 2017 at 2:09pm

    Hey Again,

    Simply change the max-width so it works on Ipad screens also . 

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width:1024px) and (min-width: 1px) {
    #logo:before {
        content: '';
        width: 180px;
        height: 30px;
        left: 120px;
        position: absolute;
        display: block;
        background-color: #fff !important;
        z-index: 9;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  5
    JuanDosCuartos replied
    January 9, 2017 at 11:01pm

    Hi Tahir, thanks a lot for helping out. We found out it was the social icons the ones to blame. They were pushing the menu that's why they were overlapping. I can live without the social icons in the main nav bar so I have removed them and now I can use the full logotype. 

    I'm sorry that I do not use your solution now, but I'm saving the custom CSS, it can be helpful in the future.

    Since I'm a Salient first-timer, I'll sure be back with some more questions, but that's another thread as they say. ;)

    Thanks again!

  •  1
    Tom replied
    March 16, 2017 at 1:48pm

    Hi Tahir, and Juan :)

    Tahir, I have the same issue: I need to display a different logo on mobile screens.

    Any clue on a future update integrating this option?

    Meanwhile, is there a css that could "crop" the top and the bottom of the logo?

    Or a css that could fix the height of the header on mobile devices, so that the logo is only partially displayed? (for instance : header is 100px height, image is 200px height >>> image is crop 50px on top and 50px on bottom)

    Thanks a lot!

    Tom

  •  9,001
    Tahir replied
    March 17, 2017 at 8:38pm

    Hey Tom , 

    Please create a new ticket with your site url and what exactly you need done . Ill see what i can do with css as regards.

    Be.st 

    ThemeNectar Support Team