Support » Themes and Templates » Alternative Styling of the wp_nav_menu

  • pauliej


    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.
    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?

Viewing 3 replies - 1 through 3 (of 3 total)
  • pauliej


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

    #footer-nav ul {
    	font-size: 11px;
    	line-height: 16px;
    	padding-left: 10px;
    	padding-right: 5px;
    #footer-nav ul li {
    	font-weight: bold;
    	text-align: left;
    	width: 50px;
    #footer-nav a {
    	color: #023849;
    	text-decoration: none;
    #footer-nav li ul {
    	display: block;
    	top: -15px;
    	width: 600px;
    #footer-nav li ul li {
    	display: inline;
    	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?

    Moderator Andrew Nevins


    Forum moderator

    Show HTML please



    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–>

    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>
    </nav><!-- #footermenu #custom-nav-->

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Alternative Styling of the wp_nav_menu’ is closed to new replies.