JohnP1

esmi – thanks for getting back to me. I currently have Permalinks set to custom structure:
/%postname%.htm

but the pages are showing up as just the postname whereas the posts do get a .htm extension.

Reading the net, it seems that posts will accept the .htm extension whereas pages do not – which is why I was wondering about a plugin.

However, before going down that route I was wondering about whether this could cause any problems – performance or what would happen if the plugin ceased to be update and compatible with forwards versions of WordPress??

Sorry – have delved further and have found out how to do this. (The side options gave me different options to the top menu options.)

Sorry to ask again, but does anyone have any experience with a medium size Woocommerce store?

paulwpxp – many thanks for taking the trouble to help!!

For some strange reason, the code you gave didn’t work in my site, but I have now managed to get it working using !important on the sub-menu code:

.sub-menu li a:before {color: #ffffff; padding: 0px 10px 0px 10px; content:’ ‘ !important;}
.sub-menu li:hover a:before {color: #ffffff; padding: 0px 10px 0px 10px; content:’ ‘ !important;}

Thanks again for your help,

John

PS If you put a website / twitter account or something in your profile, people you’ve helped could follow you as a sign of thanks. (Just a suggestion.)

paulwpxp – many thanks for taking the time to reply. I’ve been reading up on direct children selector and have tried both of the following with no results:

.menu > li a:before {content:’|’; color: #ffffff; padding: 0px 10px 0px 10px;}
.menu > li:hover a:before {content:’|’; color: #ffffff; padding: 0px 10px 0px 10px;}
.menu > li:first-child a:before {content:’ ‘;}
.menu > li:first-child.hover a:before {content:’ ‘; color: #ffffff; padding: 0px 10px 0px 10px;}

and

.menu-header > ul > li a:before {content:’|’; color: #ffffff; padding: 0px 10px 0px 10px;}
.menu-header > ul > li:hover a:before {content:’|’; color: #ffffff; padding: 0px 10px 0px 10px;}
.menu-header > ul > li:first-child a:before {content:’ ‘;}
.menu-header > ul > li:first-child.hover a:before {content:’ ‘; color: #ffffff; padding: 0px 10px 0px 10px;}

I also tried:

#main-nav > ul > li a:before {content:’|’; color: #ffffff; padding: 0px 10px 0px 10px;}
#main-nav > ul > li:hover a:before {content:’|’; color: #ffffff; padding: 0px 10px 0px 10px;}
#main-nav > ul > li:first-child a:before {content:’ ‘;}
#main-nav > ul > li:first-child.hover a:before {content:’ ‘; color: #ffffff; padding: 0px 10px 0px 10px;}

and this just lost my selectors completely and scrunched up the menus.

Could anyone point me as to where I’m going wrong – I’m so near to getting a working CSS menu but need to get this small issue sorted. My site is jwebsites.co.uk/mrba