WordPress.org

Ready to get started?Download WordPress

Forums

custom navigation inline (6 posts)

  1. betzy
    Member
    Posted 1 year ago #

    <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

  2. LastForOne
    Member
    Posted 1 year ago #

    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.

  3. betzy
    Member
    Posted 1 year ago #

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

  4. LastForOne
    Member
    Posted 1 year ago #

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

  5. betzy
    Member
    Posted 1 year ago #

    i”m working on localhost

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic