<nav id="navigation" class="navigation">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog-style-1.html">Blog</a>
<ul>
<li><a href="blog-style-1.html">Blog Page</a></li>
<li><a href="blog-style-2.html">Alternative Blog Page</a></li>
<li><a href="single-post.html">Blog Single</a></li>
</ul>
</li>
<li><a href="events.html">Events</a>
<ul>
<li><a href="events.html">Events Page</a></li>
<li><a href="single-events.html">Detailed Event</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="elements.html">Features</a>
<ul>
<li><a href="elements.html">Elements</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="columns.html">Columns</a></li>
<li><a href="sidebar-left.html">Sidebar Left</a></li>
</ul>
</li>
<li><a href="contacts.html">Contact</a></li>
</ul> -->
</nav><!--/ #navigation-->css:
/* Main Navigation
/* -------------------------------------------------- */
.navigation {
clear: both;
padding: 0 20px;
height: 60px;
}
.style-1 .navigation,
.style-2 .navigation {background-color: #d9dadb;}
.style-3 .navigation,
.style-4 .navigation,
.style-5 .navigation {background-color: #cacbcc;}
.style-6 .navigation {background-color: #4a5063;}
.navigation > ul > li {
position: relative;
float: left;
margin: 0;
list-style: none;
}
.ie7 .navigation > ul > li {height: 60px;}
.navigation > ul > li > a {
position: relative;
display: block;
padding: 0 30px;
text-align: left;
text-transform: uppercase;
font-size: 12px;
font-family: 'Adamina', serif;
vertical-align: top;
line-height: 60px;
}
.ie7 .navigation > ul > li > a {height: 60px;}
.style-1 .navigation > ul > li > a {color: #124162;}
.style-2 .navigation > ul > li > a,
.style-3 .navigation > ul > li > a,
.style-4 .navigation > ul > li > a,
.style-5 .navigation > ul > li > a {color: #373a3c;}
.style-6 .navigation > ul > li > a {color: #fff;}
.navigation .rightarrowclass {
position: absolute;
top: 50%;
right: 10px;
margin-top: -3px;
width: 3px;
height: 7px;
background: url(../images/nav-arrow.png) no-repeat;
}
.navigation > ul > li:hover > a,
.navigation > ul > li.current > a {color: #fff;}
.style-1 .navigation > ul > li:hover > a,
.style-1 .navigation > ul > li.current > a,
.style-1 .dropcapspot,
.style-1 #back-top,
.style-1 .pagination .current {background-color: #549ec8;}
.style-2 .navigation > ul > li:hover > a,
.style-2 .navigation > ul > li.current > a,
.style-2 .dropcapspot,
.style-2 #back-top,
.style-2 .pagination .current {background-color: #e53535;}
.style-3 .navigation > ul > li:hover > a,
.style-3 .navigation > ul > li.current > a,
.style-3 .dropcapspot,
.style-3 #back-top,
.style-3 .pagination .current {background-color: #79b027;}
.style-4 .navigation > ul > li:hover > a,
.style-4 .navigation > ul > li.current > a,
.style-4 .dropcapspot,
.style-4 #back-top,
.style-4 .pagination .current {background-color: #eba505;}
.style-5 .navigation > ul > li:hover > a,
.style-5 .navigation > ul > li.current > a,
.style-5 .dropcapspot,
.style-5 #back-top,
.style-5 .pagination .current {background-color: #3b5381;}
.style-6 .navigation > ul > li:hover > a,
.style-6 .navigation > ul > li.current > a,
.style-6 .dropcapspot,
.style-6 #back-top,
.style-6 .pagination .current {background-color: #75a9c7;}
/* Dropdown */
.navigation > ul > li:hover > ul {padding-top: 1px;}
.navigation li:hover > ul {
display: block;
top: 59px;
visibility: visible;
}
.navigation ul ul {
position: absolute;
left: 0;
top: 70px;
z-index: 99;
padding: 0;
width: 169px;
display: none;
}
.not-ie .navigation ul ul {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.navigation ul > li:hover ul li:hover ul {
left: 170px;
display: block;
}
.navigation ul ul li {position: relative;}
.ie7 .navigation ul ul li {height: 34px;}
.navigation ul ul li:last-of-type > a {border-bottom: none;}
.navigation ul ul a {
display: block;
padding: 9px 10px;
border-bottom: 1px solid #f2f3f4;
background-color: #D9DADB;
text-align: left;
color: #124162;
letter-spacing: 0;
font-weight: 400;
font-size: 12px;
font-family: 'Adamina', serif;
}
.style-1 .navigation ul ul a {color: #124162;}
.style-2 .navigation ul ul a {color: #373a3c;}
.style-3 .navigation ul ul a,
.style-4 .navigation ul ul a {
border-bottom: 1px solid #e3e4e5;
background-color: #cacbcc;
color: #373a3c;
}
.style-5 .navigation ul ul a {
border-bottom: 1px solid #e3e4e5;
background-color: #cacbcc;
color: #373a3c;
}
.style-6 .navigation ul ul a {
border-bottom: 1px solid #676f88;
background-color: #4a5063;
color: #fff;
}
.navigation > ul ul li:hover > a,
.navigation .active > a {color: #fff;}
.style-1 .navigation > ul ul li:hover > a,
.style-1 .navigation .active > a {background-color: #549EC8;}
.style-2 .navigation > ul ul li:hover > a,
.style-2 .navigation .active > a {background-color: #E53535;}
.style-3 .navigation > ul ul li:hover > a,
.style-3 .navigation .active > a {background-color: #79b027;}
.style-4 .navigation > ul ul li:hover > a,
.style-4 .navigation .active > a {background-color: #eba505;}
.style-5 .navigation > ul ul li:hover > a,
.style-5 .navigation .active > a {background-color: #3b5381;}
.style-6 .navigation > ul ul li:hover > a,
.style-6 .navigation .active > a {background-color: #75a9c7;}
.navigation ul ul li:hover > a .rightarrowclass {background-position: 0 -19px;}
/* Sub Dropdown */
.navigation ul ul ul {
left: 170px !important;
top: 0 !important;
}
.not-ie .navigation ul ul ul {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
/* Nav Responsive */
.navigation .nav-responsive {
display: none;
margin: 15px 0;
padding: 6px 8px;
width: 68%;
border-color: #ccc;
background-color: #fff;
background-image: url(../images/nav-bg.png);
background-position: right center;
background-repeat: no-repeat;
}can someone help me integrate the custom navigation ? i have this code
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?> for the menu to display and this one for functions.php
<?php
function register_my_menus() {
register_nav_menus(
array( 'header-menu' => __( 'Header Menu' ) )
);
}
add_action( 'init', 'register_my_menus' );
?>the only problem i have is that the menu is nost css styled :(( and it”s not displayed inline
