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
Page the top level (1) menu items bold - First three only:
/* -- code make first three top level menu items bold -- */ .main-menu>li:nth-child(-n + 3)>a { font-weight:bold !important; } /* - end - */
The value 3 can be changed. Example, -n + 4 would be the first four menu items.
Option 1c
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: