separators between navigation links

You could use the last-child CSS selector specifically (with a class selector) for your menu. This way you can set unset the separator specifically for the last menu item (li).

If you post your site’s url it is easier to give more specific advice.

You might as well go CSS all the way with this, with the after/before pseudo selectors
https://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Hi LittleBigThing,

I’m relatively new to CSS, so not entirely sure how to do that.

This is a link to my site (thus far)

https://nhspropertyservices.co.uk

I basically have a couple of issues with the navigation menu at the moment. Firstly, as I mentioned, I want to be able to remove the ‘last’ separator, to the right of the last menu item. I’ve added the separators using this code:

<?php wp_nav_menu( array( 'link_after' => '<li><font color="#89dcdb">|</font></li>','theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

The second problem I have is that I am trying to set the mouse over so that the green colour goes slightly darker, which is working, however I want the dark green colour to fill the width of the menu item, i.e. the full width between the separators and not as currently, just the width of the text itslef. I can not figure out how to achieve this at all.

The final thing I am struggling with (and please let me know if this needs to go into a new post, is how on earth do I change the background colour of the area just below the navigation menu, that shows the page titles? I’ve tried every possible thing and I still can’t get this to work.

Many thanks for any help and assistance.

You could indeed better use CSS only to add the separators as a right border for your menu items…

Try to add this CSS code in your child theme’s style.css (without adding the above php code):

#site-navigation > ul li {
border-right: 1px solid #89dcdb;
}
#site-navigation > ul li:last-child {
border-right: none;
}

I hope it works and looks OK. It will be a separator though that completely spans your navigation bar (from top to bottom)…

That is what I had in place originally, the reason I changed it was because visually I didn’t want the separator to appear top to bottom, hence the approach currently adopted.

I assume there must be a way to remove the last separator though?

Do I need ot post my other issues in separate posts, sorry, but I am also new to WP?

Many thanks

Sorry, had no time to figure out the answer to your second question. You should post a new thread on this get an answer more quickly.

To remove the last separator try adding the following css code instead:

#site-navigation > ul li:last-child {
display: none;
}

Okay, that didn’t make any difference sadly! Not sure what else to try?

I’ll create new posts for the other questinos, thanks

and if you’d leave out the “>”?

You’re a genius, yes that now works…

Many thanks, one step closer now. I’m going to post the other questinos I have now…

Thanks once again…