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