menu

Hello,

Sorry but the menu cannot be stretched. You will have to use a header style that does not use a logo on the same line as the menu in order to have more room for menu items. Here is a list of the header styles you can use with our themes: https://forum.tagdiv.com/header-styles/

Thank you!

Hello,

It can be done with a css code. Add it in the theme panel-> custom css box:

.td-header-style-5 .td-header-main-menu{
width:100%!important;
}

Thank you!

Hello dimitar,

Try to use the Header Style 10 which central displays the menu items.

Thanks for your message!

Hi,

Unfortunately it is not so easy to make the changes you want. The theme has the available options for header styles, each with a different layout. These were specially created and tested to work properly in all cases. If you want to modify the properties of a header style you can use the browser inspector tool to identify the elements used and their classes and create custom code – https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ and also take in acoount the responsive design when you make these modifications. I see that you have made the header menu full width, the sub menu is related to the menu item you are on, so the best you could do is use a code like this – https://www.screencast.com/t/47uUZPmzA but in the case where a background is set, like post template 8 it will not be easy to make the menu full width. This is the code you must enter in Theme panel->Custom Css

.td-header-style-5 .td-mega-menu ul {
left:auto!important;
}

Thanks

Hi,

As I said this is not an easy task, and even if you can manage to do something like this, it would take extensive testing and you would have to take in account multiple elements. Here is a custom code that seems to work for now, I suggest you enter it in Theme panel->Advanced Css in the desktop section – https://www.screencast.com/t/LswxcxYy The code may need additional modifications in the future because problems could arrive, since the header style is not supposed to display like this.

.td-header-style-5 .td-main-menu-logo {
margin-left: 18%;
}
.single .td-header-wrap.td-header-style-5 {
width:100%;
position: absolute;
left: 0;
}
.td-header-menu-wrap-full {
height: 70px!important;
}
.td-header-menu-wrap.td-affix {
width: 100%!important;
}

This is the result – https://www.screencast.com/t/8DCYFOpJ8LzJ – https://www.screencast.com/t/t4MDJ3eXkf6O – https://www.screencast.com/t/FSNDL1FGP6P

Thanks

Hi,

Try this modified code, it should work properly now on every page

.td-header-style-5 .td-main-menu-logo {
margin-left: 18%;
}
.td-header-wrap.td-header-style-5 {
width:100%;
position: absolute;
left: 0;
}
.td-header-menu-wrap-full {
height: 60px!important;
}
.td-header-menu-wrap.td-affix {
width: 100%!important;
}

You can also modify the margin left set on the logo, if you want to position the menu differently.
Thanks

Hi,

@Miucat If you want to remove the header ad, you could remove the code from the theme panel,in the header ad field – https://www.screencast.com/t/tJyf2dWryh

Thanks

Hi,

I do not understand how the code does not work, on my end this is what happens when the code is active – https://www.screencast.com/t/MkWxEycJQHs – https://www.screencast.com/t/UejZxgpu0uHv I have checked most of your website and applied the code where there is a problem, and it works properly. Try adding the !important rule after the position statement value in the code, maybe for some reason it is not applying on your end and check the results.

Thanks

Hi,

Again, please enter the code as it is, it should look like this in your theme panel – https://www.screencast.com/t/nzUUinFVa I do not see that position property at the moment in your header style – https://www.screencast.com/t/QRwQ1T1nVQl It should be like this – https://www.screencast.com/t/uTScpdNKnv Please also check any custom code you have entered in theme panel before this one, or temporarily remove it, to be sure it does not affect this one.

Thanks