Menu Style

Posted in: Newspaper
Post count: 23

Dear Tagdiv team,

How to change menu style like this screenshot?
Help me please.

Thank you

  • This topic was modified 9 years by emirza.
Post count: 20685

Hi,

You can choose from 12 header styles as they come with different menu styles – https://forum.tagdiv.com/header-styles/ The header style used in that page is Header style 11 – https://www.screencast.com/t/8AkTwKfpq with a menu background color set in Theme panel->Theme colors – https://www.screencast.com/t/B395MwujvtZ and additional customizations.

Thanks

Post count: 23

Hi Simion,

Thank you for the answer. But I can’t find the menu like the screenshot, how to change the menu like the screenshot with the separator? http://prnt.sc/dx14fg

Thank you

Best regards,

Emirza

Post count: 20685

Hi,

If you are referring to the border between the menu items, enter this code (it works for header style 11) in Theme panel->Custom Css

.td-header-style-11 .sf-menu > li > a {
border-right: 1px solid #003375;
}
.td-header-style-11 .sf-menu > li:first-child {
border-left: 1px solid #003375;
}

Result – https://www.screencast.com/t/qBuShC1byvM
Thanks

Post count: 23

Thank you for the answer. But I want use header style 1, what code I can use?

Oh ya, for information, I have put code in Costum CSS for change the logo view counter.

Post count: 20685

Hi,

Just change the code from .td-header-style-11 to .td-header-style-1 it should look like this

.td-header-style-1 .sf-menu > li > a {
border-right: 1px solid #003375;
}
.td-header-style-1 .sf-menu > li:first-child {
border-left: 1px solid #003375;
}

Result – https://www.screencast.com/t/rte9qCWBNjN
Thanks

Post count: 73

Is it possible to change background color of active menu item in header style – 1. that means I want to create active menu item look like style – 3.
or Is it possible to make 100% width in style – 3 like style – 1.

Post count: 20685

Hi,

The easier way to do it would be to select header style 3 and enter this code in Theme panel->Custom css

.td-header-style-3 .td-header-menu-wrap {
background-color: black;
}

Result – https://www.screencast.com/t/7g74VeJCS
Thanks

Post count: 52

Awesome! This helped me a lot! Thanks!

Viewing 9 posts - 1 through 9 (of 9 total)
You must be logged in to reply to this topic.