Change dropdown menu and font color in Forward theme?

[Michael Koeth]

Bill-

Can I have a different color scheme for dropdown menus and fonts than the main navigation bar in Forward theme?

[Bill Robbins]

Hi Michael,

You can do that. I don’t believe there are separate controls for the mobile colors; they just inherit the main navigation colors. You could do that with a bit of Custom CSS. Add this to the Advanced section in the Customizer’s CSS box:

@media only screen and (max-width: 767px) {

	#navigation .menu-button {
		color: #ccc;
		background-color: #000;
	}
	
	#navigation .menu-button:hover {
		color: #000;
		background-color: #ccc;
	}
	
	nav#primary-site-navigation .flexnav a,
	nav#primary-site-navigation .flexnav a:visited {
		background-color: #000;
		color: #ccc;
	}
	
	nav#primary-site-navigation .flexnav a:hover {
		background-color: #000;
		color: #ccc;
	}
	
	ul#menu-social-media-items,
	nav#primary-site-navigation {
		background-color: #000;
	}

}

There are several styles here. The top two are for the “button” that opens up the navigation menu. The next two are for the drop down items themselves. The last one is for the background of the social icons. It’s also the the background on the left of the drop-down when there are sub-items present. Those are slightly indented to the right so there is some space there.

If you run into any questions or trouble, let me know.

Have a great week,
Bill

[Author]

Posts