If your custom CSS isn't appearing on your Super site, don't worry, it's usually caused by a small issue such as an incorrect selector, cached styles, or another CSS rule taking priority.
This guide covers the most common reasons why CSS may not work and how to troubleshoot each one.
Verify you're targeting the correct selector
One of the most common causes is using the wrong CSS selector.
Before adding CSS, inspect the element using your browser's Developer Tools to confirm you're targeting the correct class or element.
For example:
.super-navbar__item {
color: #4f46e5;
}If the element uses a different class, your CSS won't be applied.
Tip: Use Chrome DevTools to inspect the element and test your CSS before adding it to your site.
Clear your browser cache
Browsers often cache CSS files to improve performance, which may prevent you from seeing recent changes.
If your styles aren't updating:
Refresh the page using a hard reload.
Open your site in an incognito/private window.
Clear your browser cache if necessary.
If the CSS appears in an incognito window but not your normal browser session, it's likely a caching issue.
Check CSS specificity
Sometimes your CSS is correct, but another rule has a higher specificity and overrides it.
For example, this selector:
.super-navbar__item {
color: blue;
}may be overridden by a more specific rule such as:
.super-navbar .super-navbar__item {
color: black;
}If this happens, try increasing the specificity of your selector rather than immediately using !important.
Use !important sparingly
The !important declaration forces a CSS rule to take precedence over many other styles.
Example:
.super-navbar {
background: #000 !important;
}While useful in some situations, relying on !important everywhere can make your CSS harder to maintain and troubleshoot.
Best practice: Only use !important when increasing selector specificity isn't sufficient.
Check your mobile and desktop styles
If your CSS only works on desktop or mobile, it may be inside a media query.
For example:
@media (max-width: 767px) {
.super-navbar {
display: none;
}
}This rule only applies on screens 767px wide or smaller.
Similarly, desktop-only styles won't affect mobile devices.
Always test your site on different screen sizes to confirm your CSS behaves as expected.
Check for CSS syntax errors
A missing character can prevent your CSS from working correctly.
Common mistakes include:
Missing semicolon
.super-navbar {
background: black
color: white;
}Correct:
.super-navbar {
background: black;
color: white;
}
Missing closing brace
.super-navbar {
background: black;Correct:
.super-navbar {
background: black;
}
Misspelled property
Incorrect:
backgroud: black;
Correct:
background: black;
Even small syntax errors can prevent your styles from being applied.