Struggling to order nav list into horizontal nav bar

I have added a few pages to a new menu called ‘footer_menu’ and placed the code below in the footer -

<?php wp_nav_menu(array( 'sort_column' => 'menu_order', 'menu' => 'footer_menu', 'container_class' => 'main-menu', 'container_id' => 'footer', 'theme_location'  => 'footer') ); ?>

And using the css below, I cant seem to order the buttons into a horizontal nav bar.

#footer .main-menu {position:relative; width:930px; height:30px; background-color:#333; color:#fff}
#footer .main-menu ul {position:relative; list-style: none; margin: 0; padding: 0;}
#footer .main-menu li a { float: left; width: 88px; height: 64px;}

The output in when I view source is this -

<div id="footer" class="main-menu">
<ul id="menu-footer_menu" class="menu">
<li id="menu-item-1022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1022"><a href="http://www.wfbruce.co.uk/about-barometers/">About Barometers</a></li>
<li id="menu-item-1037" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1037"><a href="http://www.wfbruce.co.uk/about-wall-clocks/">About Wall Clocks</a></li>
<li id="menu-item-1038" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1038"><a href="http://www.wfbruce.co.uk/about-regulators/">About Regulators</a></li>
<li id="menu-item-1039" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1039"><a href="http://www.wfbruce.co.uk/about-longcase-clocks/">About Longcase Clocks</a></li>
<li id="menu-item-1040" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1040"><a href="http://www.wfbruce.co.uk/about-lantern-clocks/">About Lantern Clocks</a></li>
<li id="menu-item-1041" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1041"><a href="http://www.wfbruce.co.uk/about-lewes-clocks/">About Lewes Clocks</a></li>
<li id="menu-item-1042" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1042"><a href="http://www.wfbruce.co.uk/about-bracket-mantel-clocks/">About Bracket &#038; Mantel Clocks</a></li>
</ul>
</div>

Its not coming out how i would like it too as you will see in the footer of the following site -

my site

How do you want it to come out?

It sounds like this thread might help:

Maybe try moving the float from the li a to the li?

#footer .main-menu      { ... }
#footer .main-menu      { ... }
#footer .main-menu li   { float:left }
#footer .main-menu li a { display:block; width:88px; height:6px }

For future reference, the li is a block element while the a is an inline element.
The li being a block makes them stack on top of each other :slight_smile:
You can read a little more about it here: http://css-tricks.com/almanac/properties/d/display/

Personally I would probably do something like this. but understand changing the output from wordpress can be a little difficult.

<div class="NavBar" role="menubar">
  <a href="..." class="NavBar_Item" role="menuitem">Thing 1</a>
  <a href="..." class="NavBar_Item" role="menuitem">Thing 2</a>
</div>

.NavBar      { display:flex }
.NavBar_Item { width:88px; height:64px }

The flex stuff isnt supported in all browsers though :confused:

Well to just simple line up vertically, exactly like the nav bar at the top of the page. Sorry should have pointed that out

Thank you, that’s them ordering horizontally now at least, will need to style it a bit better though.

Thanks

Another approach is the inline-block approach.
You want the parent element to be a block element, and the children you want to be spread out horizontal to be inline or inline-block.

+-[ .Parent ]-----------------------------------+
| +-[ .Child ]-+  +-[ .Child ]-+ +-[ .Child ]-+ |
| |            |  |            | |            | |
| +------------+  +------------+ +------------+ |
+-----------------------------------------------+

<div class="Parent">
  <a class="Child">thing</a>
  <a class="Child">thing</a>
</div>

.Parent { display:block }
.Child  { display:inline-block; padding:5px }

Its important to remove the float when you are doing it this way. The heights and you have added to the #footer and the li a will also cause you some pain.

Generally it is a good idea to let the children fill their parent elements. Having the anchor tags as inline-block with padding will give them a larger click area also.

Or display: table-cell as described by @PaulOB in the thread mentioned above :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.