Support » Fixing WordPress » changing appearance of a navigation bar

  • Resolved mzimmers


    Hi –

    I have used wp_list_pages to put some links in my header. I now want to play with its appearance in a few ways:

    – horizontal vs. vertical menu
    – eliminate the bullets
    – change the font and font sizes
    – highlight on rollover
    – etc.

    Can someone point me to the right documentation that talks about this? I’ve read about the NAVT tool, which might be an option, but I’d like to hear what other people would suggest for this. Thanks…

Viewing 12 replies - 1 through 12 (of 12 total)
  • If you did play with it then you probably noticed (by watching your own source code) and reading the Codex that the tag adds a class to every list item + another class to the list item of the Page you are on.
    This would solve/eliminate the highlighting issue.
    It should solve, at least partially, the styling question, too – you have the classes to define in the stylsheet.

    Additionally, you can Google for “styling nested lists”…

    Also, from the Codex:

    Thanks, Moshu. I’m studying CSS right now, since it looks like I’ll need to use it for this. Can you tell me what the “#” and “.” characters mean in this context:

    #content {
    	font-size: 1.2em
    .clear { clear:both; }

    I looked in the CSS2 reference but couldn’t find them. They’re in my theme’s style page, though.

    # – id
    . – class

    Which means in your html you can see code like this:

    <div id="content">....
    <div class="clearer">....

    The main difference is: you can have an ID only once in a page/file and classes can be used multiple times.

    I’m still studying the links you provided above, Moshu. In the meantime, how does one go about altering the powers-that-be of documentation errors? The page:

    features some apparently-deprecated code, and a typo or two.

    You create an account-register on the Codex… and go ahead!

    Hey, what do you know…it works! For the first time since I began with WP, I can now see the value of its approach.

    My style sheet makes interesting use of both hex values and color names to designate colors. It also (in some places) defines a color with only three digits (eg. #ddd). I realize that this isn’t exactly a WP question, but…is #ddd shorthand for #000ddd, #ddd000, #0d0d0d, or something else?


    Another question about colors: why is it that if I use DigitalColorMeter to determine what color something on my page is, and I code something else to match that color, it doesn’t come out the same? I double-checked my decimal to hex and it’s good. Is there some kind of opacity or something going on? I’m specifically referring to why my navigation items don’t match the “Hello World” background.

    The rollover isn’t working either, but I’ll play with that for a little more.


    Never mind…I triple-checked and my math was indeed off. Rollover wasn’t working because I’d dropped a “#”. Time for this newbie to quit fooling around and go to bed.

    Hi mzimmers,

    three digit hex colors is a shorthand with it’s own rule. It’s hard to explain it in words, so in example:

    #6a9 = #66aa99

    #123 = #112233

    Can you understand that? each digit replicates once and is placed to its right, moving the rest of the digits to the right as well, and so on.

    Hi, Hafiz. Thanks for the good explanation; I understand it now.

    I lifted this bit of code from the Creating Horizontal Menus codex:

    #navmenu ul {margin: 0; padding: 0;
    	list-style-type: none; list-style-image: none; }
    #navmenu li {display: inline; padding: 5px 20px 5px 20px}
    #navmenu a {text-decoration:none; color: blue; }

    1. is the “navmenu a” in fact referring to an anchor?
    2. Is there an option for putting a border around each list element? If so, where does it go?


    a – yes, it’s anchor
    li – would be the list item; the border should go probably for those

    (Styling lists is many times a trial and error process…especially, that in a usual WP sidebar you have nested lists. You could even google for “styling nested lists)

    Thanks, Moshu. So, do I understand this to mean that I should be adding some border information to the #navmenu li line above?

    By the way, I think I understand the #navmenu u line and the #navmenu li line, but what does the #navmenu ul li a line do?


    PS: I’m not ignoring your suggestion for googling; I’m just holding off until I get a few issues resolved with the scalar aspects of lists, then I’ll turn my attention to the nuances of a nested list.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘changing appearance of a navigation bar’ is closed to new replies.