Header Size

Hello Sami,

Please notice that Header Style 10 uses the logo in full-width and this thing means that will be displayed the full size of your logo. If you want to fit the entire space destinated for the logo, you have to load a bigger logo.

Thanks for your understanding!

Hello,

@Sami, as a quick fix, you can try using a bit of CSS code to increase the height of your logo. Use the code below and place it in Theme panel->Custom CSS area.

The code is ->

.td-main-logo img{
height: 218px;
}

Please notice that property has the height: auto and if you will use another logo with a big height than this one, the theme will display the logo with the real height of the image.

@ChaotiX66, provide your website URL and also, some details about your header logo so I can understand what and where is the problem.

Thanks for your understanding!

Hi,

The header style you are using does not have a limit for the logo image. If you would like it to cover all the space, simply upload a bigger logo image. Your current logo is like this
– https://www.screencast.com/t/LHnIWzzEipl
And the logo container for me is bigger
– https://www.screencast.com/t/lfn4hZooD
The logo image will not get stretched to fit, you have to use a bigger one. On bigger devices there will be an empty space if the image is smaller.
On mobile you can try a code like the one below for what you want to achieve. It will remove the gap you mention, align the logo to the left and move the menu toggle to the right
– https://www.screencast.com/t/dx0y4Glys8zh

.td-main-menu-logo img {
max-height:54px;
margin-left:0;
}
#td-top-mobile-toggle {
float:right;
}

This code must be entered in the Theme panel->Advanced CSS in the phones section. Please let me know if I misunderstood something, and I will make adjustments.

Thanks

Hi,

This code should make the menu and the search switch places on mobile
– https://www.screencast.com/t/DDTZrciLY

#td-top-mobile-toggle {
position: absolute;
right: 0;
}
#td-top-search {
right: 54px;
}
Enter the code in the same phones section of the Advanced Css.
To change the way the mobile modal is functioning may not be so easy. This is where the feature is defined in the theme, in the theme stylesheet
– https://www.screencast.com/t/aOkd1fUq
Try changing the translate values and see if it works properly. There may be other values and elements that would require modifications to make it work.

Thanks

Hi,

If you are using the mobile theme plugin, the easiest way would be to try a code like this in order to remove the search from the header
– https://www.screencast.com/t/5WCpIZUc

.td-search-icon {
display:none;
}

Enter the code in the Theme panel->Mobile theme->Custom Css.

Thanks

Hi,

If you want the logo like that it would require to change the height of the logo image, as well as the whole header probably. Simply stretching the current logo image will not produce the best results.
You can use the browser inspector to identify the elements and classes used, and create custom code for modifying the logo, if it is absolutely necesarry
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks