CSS for menu item separator.

• 

  speederbot · Member · Sep 14, 2021 at 12:54 pm

  • Copy link
  • Add topic to favorites

  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)

• 

  marklchaves · Member · Sep 14, 2021 at 1:15 pm

  • Copy link

  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

• 

  speederbot · Member · Sep 14, 2021 at 3:29 pm

  • Copy link

  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.

• 

  speederbot · Member · Sep 14, 2021 at 8:38 pm

  • Copy link

  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!

• 

  marklchaves · Member · Sep 14, 2021 at 11:22 pm

  • Copy link

  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

• 

  aisajib · Member · Sep 15, 2021 at 6:21 am

  • Copy link

  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

• 

  speederbot · Member · Sep 15, 2021 at 12:59 pm

  • Copy link

  Ah, thank you for clearing that up!