Navigation Menu CSS Tips ( 8 )

Here is a mix of CSS code for the navigation menu. How to Add CSS.

What's Covered

  1. How to Center the Navigation Menu
  2. Change Navigation Color
  3. Change the Navigation Font Size
  4. Change Navigation Font
  5. Make the Navigation Links All Caps
  6. Change the Navigation Link Color
  7. How to Dock the Navigation to the Top of Your Website
  8. Hide the Navigation Menu

Center the Navigation Menu

@media (max-width:3000px) and (min-width:881px) {
/* Main Nav */
ul.topnav { text-align: center;  }
ul.topnav li {  float: none;   display: inline-block; }
ul.topnav li ul li {  float: left; display: inline-block; }
/* For WPcart Menu Plugin */ #wpmenucartli { display: inline-block; float: none !important; }
}

Change Navigation BG Color

.navigation_holder { background-color: #333333;}

Change the dark grey #333333 to what ever color you want. You can use the color picker at www.colorpicker.com to get the color your want.

Change the Navigation Font Size

/* Navigation Font Size */
.topnav a { font-size:18px !important;}

This code works for the Music Maker theme 2.12 and above. Change the 18px to what ever size you want.

Change Navigation Font

/* Navigation Font */
ul.topnav li  a  {  font-family:'PT Sans' !important;}

By default, the Music Maker theme uses the PT Sans Google Font. If you change it to another font, modify the code above with your new font name to update the font in your navigation.

The spelling and spacing of the font must match exactly to work.

Make the Navigation Links All Caps

/* Navigation All Caps */
ul.topnav li { text-transform:uppercase; }

Change the Navigation Link Color

/* Navigation Link Color */
ul.topnav li a { color: #FFFFFF !important;  }

Change the #ffffff to the color you want.

How to Dock the Navigation to the Top of Your Website

/* Docked Nav Bar */
.navigation_holder , .logged-in .navigation_holder {  position: fixed; z-index: 1030; top: 0; }
.logged-in .navigation_holder {  margin-top: 32px; }
body { padding-top: 43px; }

The CSS on this page will dock your navigation menu to the top of your website and will remain docked to the top as you scroll up and down your website.

Code tested in Firefox, Chrome, and Safari on a Mac.

Please note: The mobile menu with this code is a little buggy if you have a lot of links in your navigation. Test out your navigation on mobile when using this code.

Hide the Navigation Menu

/* Hide Menu */
.navigation_holder { display: none; }
Related Articles
Last updated on August 30th, 2016

Leave A Comment?

Looking Help?
1. First search the knowledge base for answers. Email support can take 48 hours.
2. If something is not working, please read trouble shooting problems.
3. If those do not help, provide a website link to help speed up the process.