CSS for menu item separator.
-
Hello all,
Can somebody help me fill in the CSS classes filed when customising my main menu so that it give me a pipe separator between menu items, like this:
Home | Blog | Daily highest speeds | Contact | FAQ
I’m using the Hever theme and my site is at: https://a113speederbot.wordpress.com/
Many thanks,
Nick.The blog I need help with is: (visible only to logged in users)
-
Hi @speederbot,
You can try this custom CSS.
.menu-item:not(:last-child) { border-right: 2px solid black; }Result https://imgur.com/a/mhA4B3y
How to add custom CSS to WordPress.
Thanks!
Mark
-
Hi Mark,
many thanks for that but it isn’t working for me. I’m putting the code here, as per the linked image. I must be doing something wrong. Thanks for helping me!
Image: https://imgur.com/a/Boay3DP
Nick.
-
OK, so I ‘m thinking i need to add the menu entry id in here, So I’ve put:
.menu-item-XX:not(:last-child) { border-right: 2px solid black; }Where XX is the menu entry id, but it still doesn’t work!
-
Hey @speederbot,
Actually, the place you’re trying to add that CSS code I shared with you won’t work. That input field is only for CSS class names not for CSS selectors and rules. I know. That can be confusing.
Please read the How to add custom CSS to WordPress guide I posted earlier.
I believe you’ll need the Premium plan to add CSS to a WordPress.com hosted site.
Cheers!
Mark
-
Hi there!
Your site at a113speederbot.wordpress.com is on the free plan. Free WordPress.com sites can’t use custom CSS code. The image you shared shows the incorrect place where you’re pasting the CSS code. CSS code needs to go into My Site → Appearance → Customize → Additional CSS.
In order to add custom CSS to your site, you’ll need to upgrade your site to the WordPress.com Premium plan or higher. You can learn more about Custom CSS here and our paid plans here: https://wordpress.com/plans
Regards
-
- The topic ‘CSS for menu item separator.’ is closed to new replies.