larger menu font

redcardresales · Member · Apr 9, 2015 at 3:57 pm
Copy link

Add topic to favorites
How can I change the menu font to make it appear larger on my website? As well, is there a way to bring the menu headers closer to the title at the top of my homepage? Thanks in advance!!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 11, 2015 at 3:50 pm
Copy link
Hi, add the following CSS and then adjust the 1em value as desired. You can use decimals, like 1.2em, or even 1.25em.
```
.wf-active .main-navigation a {
    font-size: 1em;
}
```
redcardresales · Member · Apr 16, 2015 at 3:25 am
Copy link
Thank you SO much! Such an easy fix. Can you also tell me how to make the menu font appear 1) black in color, 2) bold?
thesacredpath · Member · Apr 16, 2015 at 5:03 pm
Copy link
Hi, and glad that worked for you. To make the menu items black and bold, add the following CSS.
```
.main-navigation a, .main-navigation a:visited {
    color: #000;
    font-weight: bold;
}
```
redcardresales · Member · Apr 17, 2015 at 3:09 pm
Copy link
Wow! Thanks again!

It appears the “home” menu button is still gray. Can I make this black and bold somehow, like the other menu buttons now appear?
thesacredpath · Member · Apr 17, 2015 at 5:04 pm
Copy link
The current page menu item is styled differently to provide a visual clue to visitors that they are on that particular page. If you wish to have them all the same, change the rule I gave above to this instead.
```
.main-navigation a, .main-navigation a:visited, .main-navigation li.current_page_item a, .main-navigation li.current-menu-item a {
    color: #000;
    font-weight: 700;
}
```

No items found.