Changing the appearance of the navigation bar

Hi Farah,

You can get your menu to appear differently with a little CSS! ??
I tried a few things – you’ll definitely want to play around with it to get your menu to look exactly the way you want, but the CSS below should get you started:

/* This will make your background color black and give your menu items a bit more room between them */
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
	background-color: #000;
	padding: 10px 0 10px 30px;
}

/* This will make your menu item links white */
.main-navigation li a {
	color: #fff;
}

/* This will also make your current page menu item white */
.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
	color: #fff;
}

In adding these styles, the menu went from this to this.

I put this code in Jetpack plugin’s custom css module – very handy way of making changes to the CSS safely (meaning that you don’t have to worry about your styling customizations being wiped out during the next theme update.) You can also do this using a child theme, if you prefer. You can find out how to do that here.

Good luck! ??

Hello!

Thank you so much for helping me! I am going to try that now:)) Thank you!!

Farah