add dividers between nav menu items

Take out what you have first and try this.

#access ul.menu > li a {
	display: inline-block;
}

ul.menu > li:after {
	content: "/";
	float: right;
	line-height: 38px;
}

ul.menu > li:last-child:after {
	display: none;
}

Hi, which code am i supposed to take out? I dont have ul.menu or access ul.menu items in my style.css?

Whatever in this
https://betterdecoratingbible.com/?action=display_custom_css_code

I’m not sure what that is from. In case it’s from a Custom CSS plugin, keep the plugin, just remove that code out first because different code applying to the same thing might (or might not) interfere with one another, so better take it out first and apply additional changes to it after.

Hi, I removed that coding and put in the one you supplied above, and still nothing. Any thoughtS?

After putting the code in, did you clear browser cache ?

Hi, yes i did please check my site you will see its not showing up. What can I do in this case?

The code works but your stylesheet has encoding problem.

The arrow sign here like this > should be just that, but it appears in your stylesheet as ampersand gt semicolon ( can’t type it here cause it will be converted to > ).

So make sure you copy and paste the code in correctly.

BTW, What Custom CSS plugin you use ?

Hi, im using custom css manager and the “>” fix you gave actually worked. The only problem is where I have a drop down menu on one of the links (for browse rooms) the ” | ” I inserted is placed lower. Any way I can fix this?

Which element is the “|” applied to?

I could just see what you mean, it renders differently in Chrome.

Use this one instead.

#access ul.menu > li a {
	display: inline-block;
	vertical-align: middle;
}

ul.menu > li:after {
	content: "|";
	font-size: 0.9em;
}

ul.menu > li:last-child:after {
	display: none;
}

hi, thanks that works. is there any way to lower the “|” ? Please see my site to see what i mean.

Lower the font size, 1.4em is too big, use 0.9em or 1em, might as well use less strong color, or assign opacity around 0.2, or use different color.

okay, even when its 0.9 it seems like its not in the center, its a little higher up compared to the other text. I guess there is nothing we can do about this.

Thanks for your help! :))

Usually, a pipe character doesn’t position the same as other characters, it’s a special symbol. Try typing a words consists of many characters and a pipe, and a slash, a square bracket, and see how they position differently in the same font settings.

Also the font stack defined for this area are too limited, so it falls back to browser default, even make it look more different.

Here is the shot comparing one in FF and one in Chrome. See with 2 different browser default fallback fonts, still look centered.

View post on imgur.com

Maybe there’s a better way to style this. But from what I look, it’s pretty centered to me, better change its opacity or use different color to compliment the design.

Grea, thanks!!!