Headway Themes — The Drag & Drop WordPress Theme

Navigation

How to Have Different Background Color for Each Navigation Menu Item?

Do you want to have different colors for each of your navigation menu item? See example as below.

different-colors-for-each-menu-items

If yes, there are few ways to achieve this in Headway Themes but in this post we are going to make use of WordPress (only version 3.0 and above has this feature) customized menu feature to achieve this. The customized menu has a “CSS classes” properties that help to style your navigation menu item to your desire.

The first step is to create a new menu in your WordPress.

  1. Log into your WordPress.
  2. At your WordPress dashboard, go to left side panel, hover over Appearance and click on Menus.
  3. To create a new menu, type in a name for e.g. main-menu besides the menu name.
  4. Click on the green button Create Menu to save the name.
  5. Move your mouse over to the left and under the Pages, click on View All to see all your menu items, check on the boxes that those that need to go into your navigation menu.
  6. Click on Add to Menu to add all the selected menu items to the newly created menu.
  7. Once done, you can see your menu structure. Click on individual menu item and it will expand with more options.
  8. By default, the CSS classes is being hidden so you need to enable it at Screen Options and it is located at the top right corner.
  9. Click on the Screen Options tab and more options are shown.
  10. Under Show advanced menu properties, check on CSS Classes.
  11. You can click on Screen Options tab to close it.
  12. Once done, you can immediately see CSS classes (optional) appear below the Navigation Label.
  13. Now you can enter the name of CSS classes you have created in the individual menu item like the screen below.

    different-colors-customized-menu

  14. Please refer to the below section – How to define CSS Classes for Navigation Menu Item if you do not know how to define the CSS classes.
  15. In the first menu item, type in Red at the CSS classes, the second menu item is Green and the last is Blue.
  16. Once you have entered the CSS class names, click on Save Menu to save.
  17. You can refresh your browser and check your navigation menu items are in different colors as you specified.

How to define CSS Classes for Navigation Menu Item

  1. Go to Headway > Visual Editor > Design.
  2. At the top menu of Design mode, click on Live CSS under Tools.
  3. In the Live CSS, define the different color of CSS classes as below.
/*DIFFERENT BACKGROUND COLOR FOR DIFFERENT NAVIGATION ITEMS */
.red { background-color:#e24d4d;}
.blue { background-color:#72c7ee;  }
.green { background-color:#d5ee72;  }
.orange { background-color:#eeb572; }
  1. Once done, go to the top right corner of the screen and click Save to save.

Change the Hover & Text Color

If you want the color to change to another color when you hover over the individual menu items, you can do so by adding the following CSS code.

/*CHANGE THE HOVER & TEXT COLOR*/
.red a:hover, .blue a:hover, .green a:hover, .orange a:hover { background-color:#613000; color:#ffffff!important;  }

Please note that the above code assigns the same hover colors for all the menu items, if you want different hover colors, you have to declare different background-color for each of them. The !important is added to override the default text color, without it, the text color will not change when hover over it.

How to Create a Fixed & Fluid Navigation Menu Bar in Headway 3?

Many Headway Themes 3 users are interested to create a fixed navigation menu bar for theirs sites. The main reason is they want to keep the navigation fix so that it is easily accessible on every page. There seem to be no direct answer given by Headway team but below are the steps you canRead More




Why I have Two Home Buttons on the Navigation Bar?

Normally when you have two “Home” buttons appearing at your navigation bar, it means you have created more than one navigation bar in your Headway Themes visual editor. Each navigation bar has its own “Home” button and to remove the extra “Home” button, you can go to visual editor to do it. From your WordPressRead More




How to disable Fly-out effect from Vertical Menu Bar?

In headway 3, the vertical menu bar at the sidebar no longer list down all its sub-menu items like in Headway 2. But now it has a cool fly-out sub-menu when hover over its main menu items. It works great and save a lot of spaces but there is occasion when sub-menu items still needRead More




How To Add a Search Icon To the Search Bar

If you feel that the search bar in Headway Themes is a little bit bare and hoping to jazz it up with a magnifying glass or search icon next to search bar, here are the steps to do it. If you are looking for a nice search icon, you can go to FindIcons.com. They haveRead More




How to Move the Search Bar to the Top of the Header

Have you thought of moving the search bar to the top of the header so that your navigation bar has more spaces for your navigation items. If yes, add the following CSS code to your custom.css file. Log into your wordpress dashboard. Go to Appearance > Editor. On the right hand side, under “Styles”, clickRead More




How to Make Parent Menu in Drop-down Menu Non Clickable?

If you have drop-down menu at your blog navigation bar, most likely you will want the parent menu to be non clickable. The parent menu serves only as a container to the children menus so it should not contain any link. There are few ways to make the parent menu non clickable but may involveRead More




How to replace Headway Search with Google Search?

Once your blog grows bigger and with more posts or pages added, Headway search may not be powerful and accurate enough for the search. You can try replacing it with Google Search instead. It is not as intimidating as one thought; you can either install a Google search custom wordpress plugin or manually add inRead More