Horizontal footer menu (5 posts)

  1. Emily
    Posted 4 years 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') ); ?>

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

  2. Caroline Moore
    Posted 4 years 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.

  3. Emily
    Posted 4 years ago #

    Thank you so much, sixhours! That worked perfectly.

  4. Carlos-David Donoso
    Posted 4 years 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...

  5. Emily
    Posted 4 years ago #


    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!

Topic Closed

This topic has been closed to new replies.

About this Topic