How to Set a Border Color

You can now set navigation borders without code

The navbar, sidebar and footer each have their own border settings in the Super Dashboard: you can turn the border on or off and choose its color for each menu separately. Use the code below only when you need more control than these settings offer.

If you need more control over the border color of navigation menus in Super (navbar, sidebar, or footer) than the dashboard settings offer, you can use the code below.

This is useful when you want to better align the navigation styling with your brand colors or overall site design, especially if the default border color feels too strong, too light, or inconsistent with your theme.

All border colors together:

• With this code, you can set the color for all borders at once.
• Simply replace #ffffff (white) with a different HEX color.
• Paste the code into the CSS tab in the Custom Code section of the dashboard.

/* Border color */
:root {
  --border-color: #ffffff;
}
/* End of border color */

All navigation border colors separately:

• With this code, you can set the color for each border individually (navbar, sidebar, and footer).
• Simply replace #ffffff (white) with a different HEX color.
• If you’d like, you can also adjust the border thickness → simply change 1px to something else (e.g. 2px).
• Paste the code into the CSS tab in the Custom Code section of the dashboard.

/* BORDER COLOR */

/* Navbar border */
.super-navbar.bottom-border {
  border-bottom: 1px solid #ffffff !important;
  box-shadow: none !important;
}

/* Sidebar border */
.super-sidebar {
  border-right: 1px solid #ffffff !important;
}

/* Footer border */
.super-footer {
  border-top: 1px solid #ffffff !important;
}

/* END OF BORDER COLOR */