Hi, I have added a logo which measures 400x179px.
I have also added this piece of code on the Custom CSS panel to get some padding.
.header-style-3 .td-logo img {
padding-top: 30px;
padding-bottom: 20px;
}
The problem is: In responsive mode, the logo overlaps with the menu line and the slider beneath it. Please note that the problem persists even If I remove the above CSS code which I have mentioned.
The site is at: culinarycafe.manifesto.co.in
I think I would be ok if I can control the height of the menu area, and the size of the logo, while on responsive mode.
Please give me some ideas on how to do this.
Thanks.
Hi,
Use the following css to fix it: http://screencast.com/t/jN84piGSA
@media (max-width: 767px) {
.header-style-3 .td-logo img {
top: 1px !important;
max-height: 48px !important;
max-width: 130px !important;
}
.header-style-3 .td-logo img {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
}
Thanks
I just tried that and it helps, but it still needs some improvement.
The logo is kind of shrunk with the 48px height, and I also need some padding above and below the logo.
How can I increase the the height of the menu area on mobile view? I can play with the height and the padding to make the logo sit nicely.
Thanks!
Hi,
Please use this css for menu height on mobile view in Theme Panel > Custom Css: http://screencast.com/t/CPTTypfV7yN
@media (max-width: 767px) {
.td-menu-wrap{
height: 65px;
}
}
And you can increase padding in the css that Lucian provided to you.
Hope this helps!
Works great. Thanks!
