Support » Themes and Templates » 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)
  • 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.

    nope, it”s not working is the same as before, the menu items are displayed, not inline 🙁 and no css style applied to them

    care mentioning your site URL to have a look myself to get a better idea.

    i”m working on localhost

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    You can still provide the HTML and CSS of one problematic webpage, so we can use a service like CSS Desk to replicate your webpage.

    Remember to use PasteBin 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.