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

Vew More

⚡Voxel Black Friday Sale is now Live

Home

Discover

Hire

Add a Dividing Line in your Vertical Menu

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