Hi – I’m struggling a bit with full-width logo. I’m using header style 11.
I’ve created a logo which is 1068×180. This is lovely on a desktop and matches the page width. On a mobile, I don’t want to specify a mobile logo (as it’s a bit small, squashed in between the menu and search icons) so I’m relying on the same 1068×180 logo on mobile too, which displays full-width below the Main Menu. Problem is with mobile display sizes, whitespace padding appears between the Main Menu (at the top) and the logo. Also padding just below the logo to the faint dividing line. I’m wondering if it’s possible to make the scaling a bit more elegant, perhaps top-justify the logo so there’s no white space between Main Menu and logo, and also perhaps lose that divider just below the logo?
Hello,
Please provide a link to your site so we can inspect it and see if there can be an elegant solution.
Thank you!
Thanks. I’ll send you the link to a test site:
Basic auth user/pass are both wibble
Ideally I’d like to use the mobile logo (and maybe make the top menu white instead of black) but it’s just a bit on the small side by default, so using the ‘desktop’ logo was the alternative.
Hi,
So maybe something like this – https://www.screencast.com/t/ULF2ZJ4vV5ce
This is the code for that, enter it in Theme panel->Custom CSS
@media (max-width: 767px) {
.td-header-style-11 .td-logo-wrap-full .td-logo {
line-height: 68px;
}
.td-header-style-11 .td-logo-wrap-full {
min-height: 68px;
border-bottom: none;
}}
You could chnage the menu background color to white and icons to black in the theme panel for a blending effect, if you want to
– https://www.screencast.com/t/gHFUyQNbopH
We could modify this code if needed, let us know.
Thanks
This is brilliant – many thanks!
Sorry for one more question – I’ve tried setting the mobile main menu background like this:
@media (max-width: 767px) {
.td-header-main-menu {
background-color: #fff !important;
}
}
but it’s being overriden with a !important in the theme code here:
@media (max-width: 767px)
style.css?ver=4.9.4:1593
.td-header-wrap .td-header-menu-wrap-full, .td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu {
background-color: #222 !important;
height: 54px !important;
}
Is it possible to override that override without hacking theme files? I’m using a child theme if that helps.
Thanks!
The background color can be set in the theme panel for the mobile menu
– https://www.screencast.com/t/CC8BN4Wy
Also the icons color can be changed there
– https://www.screencast.com/t/QBGNWp23
So there is no need for custom code to change the mobile menu and icons colors.
Thanks
Whoops, didn’t see that. Thank you so much!
