This page title is, ..

[ Howtoo: Add a Vertical Menu Bar Separator ]

[ And in twelve easy steps? – AA you say! ]

1.) Goto the WordPress Customize, that’s located 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 — https://
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.