How Too: Add a Vertical Menu Bar Separator.

{ In twelve easy steps: AA you say. }

1.) – Goto the WordPress Customize under Appearance.
2.) – Find and open the [ Menus Section ].
3.) – Move to the bottom of your Menu list: locate [ Custom Links ], – and then open it.
4.) – In the [ Menu Widget ] you’ll find.

URL — http://
Link Text — [ it’s empty BTW ]

5.) – Just put a ‘#’ in each.
{ Don’t include the quotes, just put the hash # word in. }

6.) – Then select and click -> [ Add to Menu ].
7.) – Move the new Menu Item to where you want it in your Menu List.
{ This will be where you want your vertical spacer to appear. }

8.) – Open up the ‘#’ Menu Item by clicking on the ( Small Triangle ).
9.) – Find the text box section called [ CSS Classes ] and then put the word ‘myspacer’ into it.
{ Don’t include the quotes, just put the word myspacer in. }

10.) – Now close the Menu Item by clicking on that ( Top Triangle ) again.
{ Where you want the separator on your sites menu, you should now see a ‘#’ : no quotes BTW. }

11.) – Still in [ Customize ], goto the section at the bottom called [ Additional CSS ], then simply copy and paste the CSS code below into it.

/* menu item killer */
.myspacer {
pointer-events: none;
cursor: default;
visibility: hidden;
}

{ As soon as you’ve finished copying it in: your ‘#’ Menu Item, (no quotes), will have vanished, and you will now have an invisible vertical separator in your Menus. }

12.) – Click [ PUBLISH ] at the top of [ Customize ].
{ Hopefully: well done, as you’ve now finished the twelve step AA plan. }

13.) – A Baker’s Dozen : Want another separator?
– Simply make a new Custom Links Menu, and call it #2 or whatever.
– And then in it’s CSS Classes text-box, simply add the word ‘myspacer’ as you did in the first example.
– You now have another vertical separator.

Hope it helps.

Thanks  for reading, Jessica: Praise be the ORI.