Menu Font Size and Font & Background Color

nickareno38 · Member · Jan 10, 2017 at 12:31 am
Copy link

Add topic to favorites
Hello,

I’d like to customize the size of the font in the menu and change the color of the fonts and background color of the menu when hovering over the text.

Many thanks.

-Nick

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 10, 2017 at 10:12 pm
Copy link
Hi Nick, the following will allow you to change the color and size of the menu font.
```
.wf-active .main-navigation a {
	color: #cc0000;
	font-size: 16px;
}
```
On the background color, the main menu items do not have a background color on hover right now, are you talking about those, or on the submenus off of 2013 Tour, 2014 Tour and Shorter Rides? If you are talking about the hover color on the submenu items, the following will allow you to change that.
```
.main-navigation ul ul a:hover {
	background-color: #99ff00;
}
```
nickareno38 · Member · Jan 10, 2017 at 10:45 pm
Copy link
This looks good.

Am I also able to adjust the submenu font size (under 2013 Tour, 2014 Tour, etc.)
nickareno38 · Member · Jan 11, 2017 at 1:04 am
Copy link
Before I forget, I would also like to edit the font size and color of the featured slider on the main page, remove the border around the text box, and remove the metadata (published on…) in it.
thesacredpath · Member · Jan 11, 2017 at 10:46 pm
Copy link
Sorry, I should have noticed that the submenus did not resize with the code I gave you. To adjust the submenus, add the following.
```
.wf-active .main-navigation ul ul a {
	font-size: 16px;
}
```
For the text sizes in the box over the slider, add the following and adjust as desired.
```
.wf-active .slideshow .slide-info .slide-title {
	font-size: 24px;
}
.wf-active .slideshow .slide-info .posted-on, .wf-active .slideshow .slide-info .byline {
	font-size: 15px;
}
```
nickareno38 · Member · Jan 17, 2017 at 3:31 pm
Copy link
This is good. The last thing is to remove the outline around the text in the slider and adjust the position of the text in the slider.
thesacredpath · Member · Jan 17, 2017 at 10:15 pm
Copy link
The first rule in the following removes the border and the second gives you the ability to adjust the position.
```
.slideshow .slide-info::after {
	border: none;
}
.slideshow .slide-info {
	bottom: 30px;
	left: 0;
}
```
nickareno38 · Member · Jan 17, 2017 at 10:25 pm
Copy link
Awesome. Thank you for the help!
thesacredpath · Member · Jan 17, 2017 at 10:44 pm
Copy link
You are welcome.

No items found.