How to Get Rid of the Pipe at End of a Menu in WordPress
- 1). Navigate to "Appearance" inside the WordPress dashboard, and click "Editor" to load the Edit Themes screen. Scroll down to the "style.css" link, and click to load the style sheet file for your theme.
- 2). Locate the style rule that effects the list item tags that make up your menu:
#menu li {}
Although this code differs between every theme, you will usually find an ID or class name in front of "li" which selects the "<li>" tag in your HTML code. You will also find the border property that creates the pipe:
border-left: 1px solid colorname; - 3). Duplicate the entire style rule for the menu items, and add ":last-child" after "li":
#menu li :last-child {
border-right: 1px solid colorname;
} - 4). Change the "border" property inside the new style rule:
#menu li :last-child {
border-right: 0px solid colorname;
}
Give the border property a zero-pixel width. This suppresses the border on the right side of the menu item, therefore removing the pipe on your Web page. Update the file to save your changes.
