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 :)

CSS Code Snippet Navigate to Appearance > Customizer > Custom CSS to add this snippet to your website.

.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 */

}

Copy Code

Let's Chat About this Snippet

Voxel WordPress LIVE Q/A!! May 11, 2024 - 10pm HKT/10am EDT

Join the Voxel Guide Community!

Dividing Line In Vertical Menu

Description/Instructions

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

Let's Chat About this Snippet

Community Resources

Voxel
Resources