Add spacer between menu items? (2 posts)

  1. Kevin777
    Posted 7 years ago #

    I currently have this:
    Home About Link1 Link2

    How can I get this?:
    Home | About | Link1 | Link2

    Needs to be dynamic, so when I add a new page I automatically get a new ' | ' (spacer).

  2. kennibc
    Posted 7 years ago #

    You can format it using CSS and adding an image as the background of the css properties. I have something similar in my template, except it is a little "chat" bubble that shows up next to the link that is current. I could have easily made it appear for all page links via css. Create a small "|" graphic and use that.

    Here is the code for mine:

    #nav ul li.current_page_item a {
    	display: block;
    	text-decoration: none;
    	color: #FF6600;
    	line-height: 33px;
    	font-size: 16px;
    	padding-top: 0;
    	padding-right: 10px;
    	padding-bottom: 0;
    	padding-left: 35px;
    	font-weight: bold;
    	margin: 0px;
    	border-bottom-width: 2px;
    	border-bottom-style: solid;
    	border-bottom-color: #FF6600;
    	background-image: url(images/icon_menu.png);
    	background-repeat: no-repeat;
    	background-position: 0px 4px;

    Hope this helps.

Topic Closed

This topic has been closed to new replies.

About this Topic