Skip to content

Snippets / CSS

CSS

Dividing Line In Vertical Menu

D Donald McGuinn · 250 views · Updated 2 years ago
To add a divider as a menu item in the WordPress admin menu, you can use the following steps:

Go to your WordPress admin dashboard.
Navigate to “Appearance” and then “Menus.”
In the Menu Editor, click on “Custom Links” on the left side.
Add # as the URL (this is just a placeholder and won’t be used).
Enter a name for the link, for example, “Divider.”
Click on the “Add to Menu” button.
After adding the custom link, it will appear in the menu structure.
Click on the custom link to reveal additional options.
In the “Navigation Label” field, enter a non-breaking space:  . This will prevent the label from displaying.
In the “CSS Classes” field, add a custom class, for example, menu-divider.
Go to “Appearance” and then “Customize.”
Select “Additional CSS.”
Add the following CSS code:
.menu-divider {
  border-top: 1px solid #000; /*change to any color hex code*/
  width: 100%;
  height: 1px;
  margin: 5px 0; /* Adjust margin as needed */
  padding: 0;
  pointer-events: none; /* Prevent interaction with the divider */
}
CSS · 8 lines

Discussion 1

Ask a question or share how you used this.

Log in to join the discussion.
Jack Dixon 2 years ago

Is there an example pic of this so I can see what it looks like? Or a live site

Donald McGuinn 2 years ago

You can see it on the mobile version of this site in the menu from the footer.

Voxel Guide assistant
Ask about snippets, addons & how-tos

Hey — how can I help?

I can dig through the library for snippets, addons, and tutorials.

AI can be wrong — double-check anything important.