Hi, please see the site in private section!
I’m having some problems with the logo shrinking with mobile menu. I mean the “tablet version” that appears first when you resize your browser width. After scrolling, could I have the header height be more or have logo not shrink? It’s so tiny now because I added a padding of 15px but the container height is 45px? Thanks!
Hey govus,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.logo img {
padding-bottom: 5px;
padding-top: 5px;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi, thanks I think that looks okay now! However, _if_ I wanted to have the scrolled header in question to be more in height than 45px, how to achieve this? Thank you again.
Hi govus,
Try to insert this code inside the media query code given by Victoria:
.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
height: 90px !important;
line-height: 90px !important;
}
#top .logo a,
#top .logo img {
max-height: 90px !important;
}
the code should look like:
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.logo img {
padding-bottom: 5px;
padding-top: 5px;
}
.responsive.html_mobile_menu_tablet #top #wrap_all .header-scrolled .av-logo-container {
height: 90px !important;
line-height: 90px !important;
}
#top .header-scrolled .logo a,
#top .header-scrolled .logo img {
max-height: 90px !important;
}
}
just adjust the values. Hope this helps.
Best regards,
Nikko