Join the Voxel Guide Community!

Get Involved

Dividing Line In Vertical Menu

Description/Instructions

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:

If this snippet helped, feel free to buy me a taco :)

.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
Copy Code

Let's Chat About this Snippet