How can apply custom menu with different css?

Go to dashboard ->appearance->menus
now click on Screen Options right top corner and check on CSS Classes.
When create a menu than add a css class for individual menu.

add a php code in your header.php

<nav id=”access” role=”navigation”>
<?php wp_nav_menu( array( ‘menu’ => ‘custom_menu’ ) ); ?>

and apply a css style.css
#access li.home {background:url(“images/green.jpg”) no-repeat 0 1px transparent;width:116px; height:37; text-align:center; vertical-align:middle;}
#access li.about {background:url(“images/blue.png”) no-repeat 0 1px transparent;width:107px; height:37; text-align:center; vertical-align:middle;}
#access li.project {background:url(“images/orange.png”) no-repeat 0 1px transparent;width:105px; height:37; text-align:center; vertical-align:middle;}
#access {background:url(“images/red.png”) no-repeat 0 1px transparent;width:105px; height:37; text-align:center; vertical-align:middle;}

#access {
clear: both;
display: block;
float: right;
margin: 0;

#access ul {
font-family:Arial; font-size: 10pt;
list-style: none;
margin: 0 0 0 -0.8125em;

padding-left: 0;
#access li {
float: left;
position: relative;
font-family:Arial; font-size: 10pt;
#access a {
color: #FFF;
display: block;
line-height: 37px;
text-decoration: none;

#access ul ul {
display: none;
float: left;
margin: 0;
position: absolute;
top: 37px;
left: 0;
width: auto;
z-index: 99999;
#access ul ul ul {
left: 100%;
top: 0;
#access ul ul li.aboutul{
background: #00A9C8;

#access ul ul li.projectli{
background: #F5BB01;
#access ul ul li.contactli{
background: #F54E00;

#access ul ul a{

color: #444;
font-family:Arial; font-size: 9pt;
font-weight: normal;
height: auto;
line-height: 15px;
padding: 5px 0 10px 0;

#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
color: #000000;
#access li:hover > a,
#access a:focus {
color: #000000;
#access ul li:hover > ul {
display: block;
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;

.assistive-text {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
#access a.assistive-text:active,
#access a.assistive-text:focus {
background: #eee;
border-bottom: 1px solid #ddd;
color: #1982d1;
clip: auto !important;
font-size: 12px;
position: absolute;
text-decoration: underline;
top: 0;
left: 7.6%;


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s