Horizontal footer menu

  • Emily

    (@ebloss)


    12 years, 7 months ago

    Greetings! I want to put a horizontal menu in the footer of a site, with submenu items listed directly under the parent menus. I know it can be done with CSS, but how? I’m stumped and can’t seem to find the answer here. I looked at this thread and used the code, but the submenu items are not lining up under the parents correctly. Here’s approximately how I want it to look:

    Home About Services                   Our Team             Experience
            Financial                  Charles Reardon      Transactions
            Restructuring              Liran Gordon         Case Studies
            Mergers & Acquisitions     Jeffrey R. Wilson
            Capital-Raising            Andrew Gutmann
            Principal Investing        John E. McCarrick
                                       Li Jin G. Soe

    Here’s the code I’m using in the footer.php template:

    <ul class="bottomnav">
	<?php wp_nav_menu( array('menu'=>'Main') ); ?>
	</ul>

    Here’s my CSS: 

    ul.bottomnav {margin:10px 0;overflow:hidden;}
ul.bottomnav li {padding:0 30px 0 34px;list-style-type:none;display:inline;}
ul.bottomnav li a,#footernav a:active,#footernav a:visited{text-decoration:none;}
ul.bottomnav li a:hover{text-decoration:underline;}

    Here’s the test page: http://www.asgaardcapital.com/test/

    Thanks in advance for your help!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Caroline Moore

    (@sixhours)

    12 years, 7 months ago

    Try something like this:

    ul.bottomnav li {
    float: left;
    list-style-type: none;
    padding: 0 30px 0 34px;
}

ul.menu li ul.sub-menu li {
    float: none;
    padding-left: 5px;
}

    You may need to play with the padding a bit to get things lined up the way you want.

    Thread Starter Emily

    (@ebloss)

    12 years, 7 months ago

    Thank you so much, sixhours! That worked perfectly.

    Carlos-David Donoso

    (@carlos-david-donoso)

    11 years, 9 months ago

    Hi there, I’m trying to do the exact same thing but I was wondering how did you add the sub menus underneath your main menus in the footer? I only see my main menu when I apply the code…

    Thread Starter Emily

    (@ebloss)

    11 years, 9 months ago

    Carlos-David,

    The sub menus are set up in the Menu area of the admin page… they are indented underneath the main menu items. To do that, you drag the sub menu items a little bit to the right until it shows how it will be indented.

    Hope this helps!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Horizontal footer menu’ is closed to new replies.