Support » Fixing WordPress » How to display a horizontal navigation menu?

  • 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!

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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.

    Michael

    (@alchymyth)

    Forum Moderator

    read the wordpress documentation:
    http://codex.wordpress.org/Creating_Horizontal_Menus

    and searching the web for ‘horizontal list css’ will give you plenty tutorials.

    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?

    Michael

    (@alchymyth)

    Forum Moderator

    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

    don’t think – read the documentation and follow the instructions.

    Funny, that’s almost exactly what people are taught where I live.

    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.

    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?

    Michael

    (@alchymyth)

    Forum Moderator

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to display a horizontal navigation menu?’ is closed to new replies.