WordPress.org

1. ebloss
   Member
   Posted 1 year 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!!

2. Caroline Moore
   Member
   Posted 1 year 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. ebloss
   Member
   Posted 1 year ago #
   

   Thank you so much, sixhours! That worked perfectly.

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

5. ebloss
   Member
   Posted 11 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!

Topic Closed

This topic has been closed to new replies.