Improving Twenty Seventeen Main Menu with CSS Tips & Tricks

Increase or decrease Twenty Seventeen main menu font size

ul#top-menu.menu li {
  font-size: 20px; /* values in rem, em or px */
}

Change Twenty Seventeen main menu colors

I’ve set colors to black and white in above pieces of code. You can set the color you want, with its rgb, rgba, hexadecimal or name.

Change the menu background color

.navigation-top,
.main-navigation ul {
  background: black !important; 
}

Change the menu text color

.navigation-top a,
.menu-toggle {
  color: white !important;
}

Add a background image to the menu

.navigation-top {
  background-image: url("https://mydomain.com/wp-content/uploads/2017/07/picture.jpg") !important;
}
.main-navigation ul {
  background: transparent !important;
}