Hi,
I’m facing problems with the responsiveness of my website logo. It is not resizing itself when the website is viewed in tablet mode and overlaps with the main menu. You can test it by visiting my website from an iPad or tablet device. Kindly please suggest a solution for this.
Hi,
Seems there is a design problem with that header style on tablet devices, I will add this issue on our list and a solution will be found.
I could make it look like this if you want to (only on tablets)
– http://prntscr.com/mjxqnn
This is the code for it, it can be entered in the custom CSS section of the theme panel
– https://pastebin.com/stb9ej71
Sorry for the inconvenience.
Thanks
I have the same question as manish14 as far as tablets (and phones held horizontally). I’m using the same child theme but am using the Style 2 – Multipurpose header.
Hi,
@mparlevliet This wasn’t fixed from what I can see. Happens on my end as well. Sorry for this inconvenience.
However I have modified the code from above to work in your case, if you would like to use it. The result will be like this – http://prntscr.com/nahcsm
Here is the modified code – https://pastebin.com/kQasSgQP
Let me know.
Thanks
Thanks Simion!
Is there a way to not show the logo on the sticky menu, so that it only shows the menu? The sticky menu + logo take up a lot of space with the above code. I think it’s fine for the normal menu before you start scrolling.
Hi,
In order to remove the sticky logo you can use this custom css
.td-logo-sticky .td-logo {
display: none;
}.td-logo-sticky .td-logo,
.td-header-main-menu .td-logo-sticky
{
display: none;
}
Thank you!
That doesn’t seem to work, that removes the logo from the normal menu as well. Also, I was just talking about removing the logo from the sticky menu on tablets. It doesn’t need to be removed from the sticky menu on desktop and the mobile (vertical).
Hi,
Please make sure that you set that code in Newspaper > Theme panel> Custom code> Advance css> IPAD -> https://www.screencast.com/t/LEc8MSmX22Q
In this way the code will apply only on iPad ( tablet ).
Thank you for your understanding!
Tried that (in iPad Portrait), but in this way it removes the logo altogether on iPad portrait mode and holding a phone horizontally. You can try it out yourself.
I was hoping for the logo to show, but then when you start scrolling down the sticky menu becomes the thin bar without the logo (right now it still covers a lot of area but with just the logo gone).
Hi,
Please replace the above custom css with this one
.tdm-header-style-2 .td-affix .td-main-menu-logo{
display: none;
}
.td-header-menu-wrap .td-affix {
height: 50px;
}
.tdm-header-style-2 .td-affix .menu-main-header-menu-container , .tdm-header-style-2 .td-affix .header-search-wrap {
margin-top: 3px;
}
-> https://www.screencast.com/t/fejB5df9s
-> https://www.screencast.com/t/onGh5RQW
Thanks!
Do I leave all or part of Simion’s code as well? I tried just your code above and it makes the sticky menu work, but the logo still overlaps with the menu before the scroll. Then if I add Simion’s code as well, the logo is centered before the scroll, but it overlaps the menu. I’ve left it live so you can see.
Hi,
Please let only the code that I provide, in this way I will be able to make the right changes to look good the sticky and normal header.
Thank you for your understanding!
Okay, take a look now.
Hi Calin, just following up on this one. Thanks.
Hi,
Please set the code that Simion provide you in IPAD section too -> https://www.screencast.com/t/dQNLuiCivqub this should make the logo to look nice and hide it from stick menu.
.tdm-header-style-2 .td-header-menu-wrap-full {
height: 130px!important;
}
.tdm-header-style-2 .menu-main-header-menu-container,
.tdm-header-style-2 .header-search-wrap{
margin-top: 60px;
}
.tdm-header-style-2 .td-logo-in-menu {
width: 180px!important;
left: 0!important;
right: 0!important;
margin: 0 auto;
}
Thank you!
