• Resolved codblue

    (@codblue)


    Need some quick help with aligning my navigation menu. Currently it’s in the left side of my footer however I would like it to be on the right side.

    Heres the HTML

    <footer id="footer">
    			<?php get_sidebar( 'footer' ); ?>
     			<nav id="access" role="navigation">
     				<?php wp_nav_menu( array( 'theme_location'  => 'primary_nav', 'container_id' => 'primary-nav', 'container_class' => 'nav', 'fallback_cb' => 'minimatica_nav_menu' ) ); ?>
    			</nav><!-- #access -->
    		</footer><!-- #footer -->
    	</div><!-- #wrapper -->
    	<?php wp_footer(); ?>
    </body>
    </html>

    here’s the style sheet

    .nav {
    
    	width:940px;
    	height:24px;
    	margin:0 auto;
    	margin-bottom:50px;
    	font-size:24px;
    	line-height:24px;
    }
    
    .nav ul {
    
    	position: relative;
    	z-index:597;
    	float:left;
    	top:auto !important;
    	bottom:100%;
    	list-style:none;
    	margin:20px 0;
    }
    
    .nav ul li {
    	float:left;
    	height:34px;
    	margin:0;
    	margin-right:36px;
    	vertical-align:middle;
    }
    
    .nav ul li.hover,
    .nav ul li:hover {
    	position:relative;
    	z-index:599;
    	cursor:default;
    }
    
    .nav ul ul {
    	visibility:hidden;
    	position:absolute;
    	top:100%;
    	left:-10px;
    	z-index:598;
    	min-width:150px;
    	margin-bottom:5px;
    	background:#FFF;
    	border-top:#CCC 1px dotted;
    	font-size:18px;
    }
    
    .nav ul ul li {
    	float:none;
    	min-height:34px;
    	height:auto !important;
    	margin:0;
    	padding:0 10px;
    	border-bottom:#CCC 1px dotted;
    }
    
    .nav ul ul ul {
    	bottom:-10px;
    	left:99%;
    }
    
    .nav ul ul ul {
    }
    
    .nav ul li:hover > ul {
    	visibility:visible;
    }
    
    .nav ul li a {
    	display:inline-block;
    	padding:5px 0;
    	color:#252525;
    	text-decoration:none;
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • According to your code you should change to “float:right;” instead of “float:left” in this class “.nav ul”

    Make sure this is the right class.. Sometimes both footer and header navigation use the same class..

    .nav ul {
    
    	position: relative;
    	z-index:597;
    	float:right;
    	top:auto !important;
    	bottom:100%;
    	list-style:none;
    	margin:20px 0;
    }
    Thread Starter codblue

    (@codblue)

    anujasha9,

    I don’t know how the heck I missed that! Here I am trying to ADD “float: right” instead of just changing what’s already there. Sometimes you need a second set of eyes! Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Align navigation footer to the right’ is closed to new replies.