Add a Dividing Line in your Vertical Menu
D
Donald McGuinn
·
Jan 25, 2024
·
1 min read
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 */
}