Super makes it easy to build a beautiful navigation bar, and with a little custom CSS you can personalize it even further.
This guide includes some of the most common navigation customizations requested by the Super community. Simply copy the snippets below into Site Settings → Code → CSS and adjust them to fit your design.
Important:
Before applying any custom CSS, make sure you have an active subscription for it to reflect on live site. We also recommend testing your changes on both desktop and mobile devices.
Create a transparent navigation bar
A transparent navigation bar is commonly used for landing pages and hero sections, allowing the page banner or cover image to remain visible behind the navigation.
Add this to your Code Section >CSS Tab:
You can customize this based on the preferred transparent color and opacity.
.super-navbar {
background: rgba(255, 0, 0, 0.2) !important;
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
}
Smooth color transitions
Create a smooth color transition when visitors hover over navigation links. This subtle effect improves the user experience by providing clear visual feedback while maintaining a clean, modern look.
Please add this to your Code>CSS
.super-navbar__item {
transition: color 0.3s ease;
}
.super-navbar__item:hover {
color: #4f46e5;
}
Underline on hover
Add an underline that appears when visitors hover over a navigation link. This classic effect provides clear visual feedback while keeping your navigation clean and easy to read.
Please add this to your Code>CSS
.super-navbar__item {
text-decoration: none;
}
.super-navbar__item:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
Adjust spacing between navigation items
Increase or decrease the spacing between navigation links to better match your site's design. Wider spacing can create a more modern, minimal look, while tighter spacing is useful for menus with many items.
Please add this to your Code>CSS:
.super-navbar__item-list {
gap: 2rem;
}