Navigation: Bold menu items

Here are some code examples to make your navigation menu items bold:

Option 1a

Make only top level (1) menu items bold. Keep (2) and (3) normal:

/* -- code make top level menu items bold -- */
.main-menu>li>a { font-weight:bold !important; }
/* - end - */

Option 1b

Make the top level (1) menu items bold on hover only:

/* -- code make top level menu items bold -- */
.main-menu>li>a:hover { font-weight:bold !important; }
/* - end - */

Option 2

Make (1) and (2) bold. Keep (3) normal. 

/* -- code to bold primary menu items -- */
.main-menu>li>a { font-weight:bold !important;}
.main-menu-dropdown li a { font-weight: bold !important;}
.main-menu-dropdown li.child a { font-weight: normal !important;}
/* - end - */

Option 3

Make (1), (2) and (3) bold:

/* -- code to bold all menu items -- */
.main-menu>li>a { font-weight:bold !important;}
.main-menu-dropdown li a { font-weight: bold !important;}
/* - end - */

Option 4

Make (2) bold. Keep (1) and (3) normal:

/* -- code to bold parent links bold -- */
.main-menu-dropdown li a { font-weight: bold !important;}
.main-menu-dropdown li.child a { font-weight: normal !important;}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us