Struggling to order nav list into horizontal nav bar

CMS & WordPress
1

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

2

How do you want it to come out?

It sounds like this thread might help:

3

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:

4

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

5

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

Thanks

6

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.

7

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

1 Like
8

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