Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #3711

    How would I add a 3px width gif border image to appear to the right of every menu link including the “Home” link?

    My site:



    You can add a background image to the menu links with this code. Update PATH/TO/IMAGE.JPG to the relative path of the image (which should ideally be in your images folder). Add this to the end of style.css:

    #top .nav li { background: url(PATH/TO/IMAGE.JPG) repeat 0 0; }




    I wasn’t able to get your suggestion to work.

    The image border that I want to use is 3px x 27px. I’d like the image to appear to the right of every top menu link including the “Home” link.

    I’ve uploaded my header to include how I want the border to look, although in this case the borders are just a part of the header image itself. Instead I’d like them to be coded to appear to the right of each top menu item that way I don’t have to redesign the header image each time that I make changes to the menu.

    My site:


    Can anyone help me with this?



    sorry for the late reply. Just add:

    #top .nav li {
    border-right: 1px solid #777;

    to style.css (at the very bottom). You can change the color if you like :)


    A colored border as opposed to an image will work. Is it possible to make the border 3px wide with a color sequence of #FFFFFF #e2e2e2 #FFFFFF?


    It’s not easily possible to use different border colors for every menu item. You can set the border color depending on the menu item id or you can use jquery to set the border attribute (with a counter).


    How about a 3px x 27px image border? I tried the suggestions above by James Morrison but couldn’t get it to work. How would I go about inserting the border image to appear to the right of each menu item?

    Dude, are you available for custom work, or do you perhaps know someone who is? I’m willing to pay someone to help me configure my top menu bar (adding the menu borders + adding a network link in the upper right menu corner with a drop down menu).


    Basically the image border works like a “normal” border if you set it on a per item basis. You can set the border color by using the item id class like (add the code to style.css at the very bottom):

    border-right: 3px #FFFFFF solid !important;

    border-right: 3px #e2e2e2 solid !important;

    If you want me to do the modification for you (or the network item nav link) please send me a mail to: (Email address hidden if logged out) with more details and I’ll make you a qoute.

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Top Menu Border Insertion’ is closed to new replies.