Title: custom navigation inline
Last modified: August 20, 2016

---

# custom navigation inline

 *  [betzy](https://wordpress.org/support/users/betzy/)
 * (@betzy)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-navigation-inline/)
 *     ```
       <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

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [LastForOne](https://wordpress.org/support/users/jarral/)
 * (@jarral)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-navigation-inline/#post-3491082)
 * **instead of **
    `<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class'
   => 'nav', 'theme_location' => 'primary-menu' ) ); ?>`
 * **use**
    `<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class'
   => 'navigation', 'theme_location' => 'header-menu' ) ); ?>`
 * hit me up if it doesnt work.
 *  Thread Starter [betzy](https://wordpress.org/support/users/betzy/)
 * (@betzy)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-navigation-inline/#post-3491084)
 * nope, it”s not working is the same as before, the menu items are displayed, not
   inline 🙁 and no css style applied to them
 *  [LastForOne](https://wordpress.org/support/users/jarral/)
 * (@jarral)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-navigation-inline/#post-3491085)
 * care mentioning your site URL to have a look myself to get a better idea.
 *  Thread Starter [betzy](https://wordpress.org/support/users/betzy/)
 * (@betzy)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-navigation-inline/#post-3491087)
 * i”m working on localhost
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 3 months ago](https://wordpress.org/support/topic/custom-navigation-inline/#post-3491088)
 * You can still provide the HTML and CSS of one problematic webpage, so we can 
   use a service like [CSS Desk](http://cssdesk.com) to replicate your webpage.
 * Remember to use [PasteBin](http://pastebin.com) for large excerpts of code. Then
   link us those PasteBin’d pages.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘custom navigation inline’ is closed to new replies.

## Tags

 * [custom navigation](https://wordpress.org/support/topic-tag/custom-navigation/)

 * 5 replies
 * 3 participants
 * Last reply from: [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * Last activity: [13 years, 3 months ago](https://wordpress.org/support/topic/custom-navigation-inline/#post-3491088)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics