Posted 2 years ago #
Hello,
how can I make a horizontal navigation menu in the header?
I tried wp_page_menu and wp_list_pages as well as a similarly working plug-in, but they all display an unordered list.
I want to put links in one horizontal line, from left to right.
Thanks!
Posted 2 years ago #
When creating menues in general, you use unordered lists. An ordered list means that the list elements have a number in front of them, instead of a symbol.
To align elements horizontally, you use 'float:left' or 'display:inline' is CSS.
In other words, if you have an unordered list of menu links, you apply for example 'float:left' to each li element, to make them appear in a horizontal line.
read the wordpress documentation:
http://codex.wordpress.org/Creating_Horizontal_Menus
and searching the web for 'horizontal list css' will give you plenty tutorials.
Posted 2 years ago #
I don't think it's that easy when using wordpress functions.
In my header.php I put
<div id="navmenu">
<?php displayMenu(1); ?>
</div>
where displayMenu(1) works very similar to wp_list_pages.
In CSS, I have
#navmenu {font-family: Helvetica, Arial, sans-serif !important; font-size:20px;}
#navmenu {float:left;}
#navmenu {margin-bottom: 0px;}
#navmenu {display: block; }
...
The menu is displayed vertically, and I think it's because it's called once inside the div.
There are of course workarounds, like simply making a menu with hard-coded links, but this would be a hassle if the blog moves to another address, for example.
I'd like to know how to change this function or wp_list_pages to display in one line, horizontally.
I'd like to send you a link to the blog, if you don't mind. How do I do it?
The menu is displayed vertically, and I think it's because it's called once inside the div.
it is more because your css file has not the propers styles added yet.
don't think - read the documentation and follow the instructions.
I'd like to know how to change this function or wp_list_pages to display in one line, horizontally.
as @oakim already said, most of the list functions in wordpress generate an unordered list.
to get it to show horizontally, you have to learn and apply the css styles, as instructed by http://codex.wordpress.org/Creating_Horizontal_Menus
Posted 2 years ago #
don't think - read the documentation and follow the instructions.
Funny, that's almost exactly what people are taught where I live.
Posted 2 years ago #
Ok, got it working, though I had to think,and more than once.
It was CSS for li elements that made it work
#navmenu li {display: inline; }
Thanks again.
Posted 2 years ago #
Did anyone ever get it working using wp_list_pages? I've been trying to put a horizontal menu in my header using wp_list_pages. if I apply {display: inline; list-style-type: none;} CSS styling on the class .pagenav (to which every list element created from wp_list_pages apparently belongs), I get a horizontal list, but there is a single bullet to the left of it, which I can't for the life of me figure out how to get rid of. Any suggestiongs?
This topic has been closed to new replies.
