Hi Guys,
I’m using header style 7 and my logo is displaying at 320 x 105 px. I’d like to be able to customize the size and make it bigger as needed. Is there a Custom CSS code that will let me control its dimensions?
Thanks!
Hi,
You can try to use custom css for it and set the logo’s image max height using this css in theme panel > custom css section:
.td-header-style-7 .td-header-sp-logo img {
max-height: 100px;
}
Let us know how it goes and provide your site’s URL so we can inspect it if you need a more accurate answer on this.
Thanks
Thanks Lucian. My site is under development right now so I don’t want to make it live quite yet. This code has made the image larger, but now it runs over top of the rest of the header. Is there a code I can use to change the max height of the entire header?
Thanks again for your help – much appreciated!
Hi,
I’m not sure if this is what you mean but the header menu has an inline height – http://screencast.com/t/8IM4vXY99x You can try to use browser’s inspector to target header elements and find a solution where to add a max-height value.
Thanks!
Hi Again,
Here’s a link to my site so you can see what I mean: http://www.irreverentgent.com/
Here’s the custom CSS I’m using right now to make it look this way:
.td-header-menu-wrap {
border: 2px solid #cccccc; }
.td-header-style-7 .td-header-sp-logo img {
max-height: 150px;
padding: 0px 0;
}
I’m hoping to make the whole header move down to align with the bottom of the logo, rather than have the logo pop out of the header as it does now. Any advice would be greatly appreciated.
Thanks again!
Hi,
First your css is not applied – http://screencast.com/t/tDRqI2IIh749 also I guess that you have some custom modifications there as the sticky menu is always enabled even at the top of the page – http://screencast.com/t/RVH6lmfQ
Header style 7 should look like this by default – http://screencast.com/t/LaG3m5D0Tax so please remove your custom modifications or if you don’t have please disable all your plugins, leave just Visual Composer active, clear cache and see if it works. I could not recreate this and it should not work like that, the sticky menu should be enabled only when you scroll.
Thanks!
Hi Again,
I’ve removed all custom coding and disabled all plugins. I’d like the entire header container to have a height of 200 px, but can’t seem to figure out the right css code for this. Any suggestions?
Hi,
Please try this custom css in Theme Panel > Custom Css – http://screencast.com/t/QVxvOgtC you will have to use media queries for each screen device and also you will need additional customizations for logo, menu items, unfortunately we cannot provide any type of custom work at this time as we work hard on development, fixes and support, sorry!
@media (min-width: 1020px){
.td-header-style-7 .td-header-menu-wrap-full {
height: 171px !important;
}
}
@media (min-width:768px) and (max-width: 1019px){
.td-header-style-7 .td-header-menu-wrap-full {
height: 100px !important;
}
}
Thanks!
That code worked perfectly, thank you so much!
Hi Guys,
I just noticed one more small thing. The header looks perfect when you first visit my site, then when you scroll down the menu goes sticky, which is great. But when you scroll back up, the menu has reverted to its default size, and the logo is too large – it hangs over the bottom of the menu.
http://www.irreverentgent.com/
Please let me know if there’s anything I can do to prevent this from happening.
Thank you again for the great support! Really enjoying this theme so far.
Hi,
Please try the following css and check if the issue is still there:
@media (min-width: 1020px){
.td-header-menu-wrap {
height: 170px;
}
.td-header-menu-wrap.td-affix {
height: 48px;
}
}
@media (min-width:768px) and (max-width: 1019px){
.td-header-menu-wrap {
height: 100px;
}
div.td-header-style-7 .td-header-sp-logo img {
max-height: 100px;
max-width: initial;
}
.td-header-menu-wrap.td-affix {
height: 48px;
}
}
Thanks!
That worked! Now it really is perfect. Thanks so much!!
