1. Home
  2. Appearance
  3. Navigation Menu

Navigation Menu

Here are tutorials for the navigation menu.

You can edit the navigation colors in the WordPress Customizer.


How to Add a Navigation Menu

  1. Click Menus under the Appearance.
  2. Start by creating a new menu in the panel on the right.
  3. Once the new menu is created, you can add pages, categories, and custom links from the panels on the left.

Adding Pages to the Navigation:

When you publish a static page to your site, you will need to add it to the navigation menu manually.

For example, let’s say you created a contact page that is now live. You will need to come to the Menus page to add it to the navigation it will appear under Pages.

Check the boxes to the pages you would like to add and click the Add to Menu button.

The pages you selected will be transferred to the right side of the page in the navigation box.

You can then reorder and create submenus by dragging the menu items. When you’re finished, click the Save Menu button.


How to Edit the Menu Location

  1. In WordPress click Customize under Appearance on the sidebar
  2. Click Header > Menu Location
  3. Click the Select Image button under Logo Image.
  4. Select your choice under Menu Location.
  5. Click the Save & Publish button.


Here are the steps to follow to add a shopping cart link in your header menu.

menu

Install the WP Menu Cart Plugin

  1. In WordPress click Add New under Plugins on the sidebar.
  2. In the “Search plugins” box at the top right of the page enter WP Menu Cart and hit enter on your keyboard.
  3. Click Install Now. Then click Activate Plugin.
  4. WordPress click Menu Cart Setup under Settings on the sidebar.
  5. Select the menu in your header and select any other settings you desire.
  6. Click the Save Changes button.

install now


If you would like to add options to sort beats by Genre, Tags, Categories, or Price in your navigation menu, follow these steps.

Here is an example of what you will get in the menu:

Menu

Detailed Instructions

Jump to the 2:00 mark to hear about adding the beat sorting links.

IMPORTANT: Before you follow the steps below, make sure you have created some Genres, Tags, or Categories and have added beats to them.

  1. In WordPress click Menus under Appearance on the sidebar.
  2. At the top right of the page, click the Screen Options tab and check Music Genres, Download Tags, and Download Categories.
    Check-compressor
  3. On the left side of the page, click Links. Enter # as the URL and name the main link whatever you want ( Example: Browse by Genre ) and click Add to Menu.
    Screen Shot 2014-02-07 at 12.52.33 PM
  4. Now on the left side of the page click Music Genres. Select all the music genres you would like to appear in the navigation and click Add to Menu.
    Screen Shot 2014-02-07 at 12.56.02 PM
  5. All the menu links will now be added to the menu.
  6. Now that all of the links have been added to the navigation, you need to stack the music genres under the main “Browse by Genre” Link. Do this by dragging and dropping the link under the top link.
  7. If you want to make the menu more complex do the same thing with Download Categories and Download Tags.
    menu-sort-compressor
  8. Next click the Save Menu button at the bottom right of the page.
    Screen Shot 2014-02-07 at 1.01.38 PM


CSS Tips & Tricks

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

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

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

.navigation_holder { background-color: #333333;}

Change the Navigation Font Size

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

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

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

Change the #ffffff to the color you want.

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

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 site 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; }

Updated on November 17, 2017

Was this article helpful?

Related Articles

Leave a Comment