I have looked through the threads and tried a few quick CSS edits. Nothing seems to work with getting the logo to shrink on a mobile device?
Here is the website link: http://yeshejacksonart.com/
Also How do I slow down the exit of the images in the layerslider? This is a tricky deal…hehe.
Thanks in advance!
Joshua
Hi Joshua!
Please add following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (max-width: 767px) {
.logo, .logo a, .logo img {
max-height: 50px!important; }
.responsive .mobile_slide_out .logo img {
margin-left: -30px!important; }}
Best regards,
Yigit
Thanks Yigit!
That kinda helped but the logo spans too far off the screen. Maybe its just too big?
Hi!
You can add this one;
@media only screen and (max-width: 767px) {
.responsive .logo img {
margin: 0 auto;
max-width: 268px !important;
}
}
Cheers!
Ismael
Hi,
I just used this CSS for a site I’m working on – and the logo now looks great on mobile, but the hamburger icon and the search icon are too low, need to scoot up a bit to be inline centered with logo… could you help me with that.
My site is here: http://047f6450c0.nxcli.net/
Hi,
Thank you for the inquiry.
You may need to add this css code inside the css media query to adjust the height of the mobile and search icon.
.responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive #top #wrap_all .av-logo-container {
height: 50px;
line-height: 50px;
}
Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code. And if you need further assistance, please do not hesitate to open another thread. We will close this one for now.
Have a nice day.
Best regards,
Ismael