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 & 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
RT_
February 2, 2015, 1:57pm
2
How do you want it to come out?
It sounds like this thread might help:
I have spent some time trying to figure out why it is so difficult to center a nav bar. I searched the web and downloaded some examples that claimed to be centered. After some checking, everyone I found was not centered as advertised. So, I decided to see if I could figure it out on my own and made good progress.
So, if someone can let me know where to post this info - which BTW, is simply a codepen link, I will do so.
Thanks!
orodio
February 2, 2015, 1:58pm
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
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
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
orodio
February 2, 2015, 2:19pm
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.
RT_
February 2, 2015, 2:42pm
7
Or display: table-cell as described by @PaulOB in the thread mentioned above
1 Like
system
Closed
May 4, 2015, 9:55pm
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.