WordPress.org

Ready to get started?Download WordPress

Forums

Alternative Styling of the wp_nav_menu (4 posts)

  1. pauliej
    Member
    Posted 2 years ago #

    I have a tradition horizontal menu with vertical drops in my theme that makes use of the wp_nav_menu but I want to add an addition display of the menu in the footer, but styled differently. The style I want is for the the top-level menu items to list vertically with the submenus inline to the right.
    ex.
    MenuItem1
    MenuItem2 Sub1 Sub2
    MenutItem3 Sub1 Sub2
    MenutItem4 Sub1

    I created a different id for this calling of the wp_nav_menu, but i am not sure how to style the ul and li to accomplish my menu. Any thoughts?

  2. pauliej
    Member
    Posted 2 years ago #

    I have gotten the menu close to where I want it. with the following css:

    #footer-nav ul {
    	font-size: 11px;
    	line-height: 16px;
    	list-style:none;
    	padding-left: 10px;
    	padding-right: 5px;
    
    }
    #footer-nav ul li {
    	display:block;
    	font-weight: bold;
    	text-align: left;
    	width: 50px;
    }
    #footer-nav a {
    	color: #023849;
    	text-decoration: none;
    }
    #footer-nav li ul {
    	display: block;
    	position:relative;
    	top: -15px;
    	width: 600px;
    }
    #footer-nav li ul li {
    	display: inline;
    	font-weight:normal;
    	float: left;
    	left: 60px;
    	position: relative;
    
    }

    Now the problem I am having is that there is the extra line space under items that have a subitem and there is not a space under items that do not.

    Any Thoughts?

  3. Andrew
    Forum Moderator
    Posted 2 years ago #

    Show HTML please

  4. pauliej
    Member
    Posted 2 years ago #

    I am calling the menu with:
    ` <div id="footermenu">
    <nav id="footer-nav" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'primary' , 'depth'=>'2' ) ); ?>
    </nav><!-- #footermenu #custom-nav-->
    </div>`

    but it resolves to something like:

    <div id="footermenu">
    	<nav id="footer-nav" role="navigation">
    	   <div class="menu-primary-container">
                 <ul id="menu-primary-1" class="menu">
                    <li class="menu-item..."><a href="http://localhost...">Home</a></li>
                    <li class="menu-item..."><a href="http://localhost...">Page1</a>
                        <ul class="sub-menu">
    	                 <li class="menu-item..."><a href="http://localhost...">SubMenuPage1</a></li>
    	                 <li class="menu-item ..."><a href="http://localhost...">SubMenuPage2</a></li>
    	            </ul>
                   </ul>
                  </div>
    </nav><!-- #footermenu #custom-nav-->
    			</div>

Topic Closed

This topic has been closed to new replies.

About this Topic