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;
}
Thread Starter
wpgeanie
(@wordpressgeanie)
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
http://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.
Thread Starter
wpgeanie
(@wordpressgeanie)
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 ?
Thread Starter
wpgeanie
(@wordpressgeanie)
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 ?
Thread Starter
wpgeanie
(@wordpressgeanie)
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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;
}
Thread Starter
wpgeanie
(@wordpressgeanie)
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.
Thread Starter
wpgeanie
(@wordpressgeanie)
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.
