"Logo shrinks too much on mobile`" (#562170) / ThemeNectar

Comments

Will started the conversation
October 21, 2015 at 1:28am
Hi!
Is there any way to get my logo to shrink less on mobile?
-W

8,990

Tahir replied

October 21, 2015 at 2:47pm

Hey ,

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: 1000px) and (min-width: 1px) {
    body header#top #logo img, #header-outer[data-permanent-transparent=\"false\"] #logo .dark-version {
        height: 44px!important;
        margin-top: -18px!important;
    }
}

Thanks

ThemeNectar Support Team

Will replied
October 21, 2015 at 9:54pm
Hi!
That successfully made my logo larger on mobile, however it is not longer centered, and there is no white space above or beneath. Is there a simple tweak I can make to this code to center it and add some space (in the header) above and below the logo?
Thanks!
-W
8,990
Tahir replied
October 21, 2015 at 11:15pm
Simply adjust the values -18 t0 -20 to move it up . Or reduce height.
Cheers

ThemeNectar Support Team
Will replied
October 22, 2015 at 6:56pm
Thank you. I see that I can adjust the height of the logo, though when I adjust the margin-top, I don\'t see much of a difference in anything. My goal is to keep the height of the logo (44px), and add white space above it and beneath it, so it is more proportional to the way the logo is displayed on a desktop. So basically, I want to make the entire mobile header taller to accommodate the larger logo.
What controls the height of the mobile header?
-W
Will replied
October 22, 2015 at 9:45pm
I added this:
@media only screen and (max-width: 1000px) and (min-width: 1px) {
header#top .col.span_9 {
margin-left: 0px;
min-height: 60px!important;
margin-bottom: 30px!important;
}
}
and then tweaked the top margin value. sound right?
8,990
Tahir replied
October 22, 2015 at 11:40pm
Hey Again,
Whichever works for you.
Cheers

ThemeNectar Support Team