If you need to customize the border color of navigation menus in Super—such as the navbar, sidebar, or footer, you can do so using 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
1pxto 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 */