Hi,I have 2 issues:
1.I use default logo size 272×90, and it’s hardly seen. How I can make header section higher, in order to use custom size logo. I use Header style 12. I also will need to display it on mobile with bigger size than default.
2. How to position search icon on right side, now it shown like here:
I found that same logo on style 7 looks great, so tried to copy it css into Style 12, like so:
.td-header-style-12 .td-main-menu-logo img {
max-height: 106px;
position: relative;
padding: 6px 0;
line-height: 106px;
vertical-align: middle;
}
It doesn’t work. Logo size I need – 374px x 90px
Hi,
1. Most header styles are designed to use a recommended logo size
– https://forum.tagdiv.com/logo-favicon/
Only header styles 9, 10 and 11 are different. These header styles will display the logo in the any size you create it
– https://forum.tagdiv.com/header-styles/
For example this theme demo uses header style 10 and a large logo
– https://demo.tagdiv.com/newspaper_cars/
When using header style 12 the total height of the header will be limited like this
– https://www.screencast.com/t/xPG0DeYjuR
If you want to use a logo with a 90px height, try to increase the line height of the menu to 90px, that will increase the overall height
– https://www.screencast.com/t/qJDQGUqJ8Kkg
Then set your desired logo, see how it looks.
2. The search can be displayed wither in the top bar or in the main menu
– https://www.screencast.com/t/cIX9JaxZItDP
When in the top bar it will appear before the socials. To place it to the right, after the socials, try this code
– https://www.screencast.com/t/Yt0fVR3RS1bz
.td-header-sp-top-widget .td-search-btns-wrap {
float: right!important;
}
Thanks
Hi, Simion. I’ve changed line height as suggested, but this still not enough.
I’ve added this code to css:
.td-header-wrap, .td-header-style-12,.td-header-menu-wrap-full {
height: 110px;
}
.td-header-style-12 .td-main-menu-logo img {
max-height: 110px;
margin-right: -22px;
}
And now logo looks good, but megamenu overlaps with a main menu, like here:
And menu links need to place on the middle by horizontal, like here:
How to fix that? Appreciate your help.
Thanks
Hi,
Could you provide a link to the website so I can take a look? Remove the code you used so I can see how it actually looks.
I can make it bigger but it will overlap the menu items
– https://www.screencast.com/t/dmJ1sfpI
The reserved space for the logo in this header style is 190px only, the rest will be used by the menu items, from the total width of the container.
Maybe if you stretch the header elements first – https://www.screencast.com/t/54Kf7kK4QO
That will create the space for a larger logo without interfering with the menu items.
Try to use the stretch settings and then use this code (you can modify the values used)
– https://pastebin.com/SZdn3ptN
I should mention that we are working on a header builder, it will be released in coming updates. Maybe something like this will be possible without using any code, I can’t say at the moment.
For the footer you can use a footer template with a full row, not split in columns. For example style 4
– https://forum.tagdiv.com/footer-templates/
Then you can use a much larger logo, it will not be limited as it is now
– https://www.screencast.com/t/3RMnqymt7
Stretching + code did the trick.
Thank you very much, Simion. Appreciate your help.
