I made a basic bootstrap 5 template for my Joomla 4 website and trying to customize navbar but css added to user.css some how not working.
I see the user.css is loaded in the source code of the page and also see the code inside the user.css file on the web server.
Here is my navbar code and css:
user.css
nav .navbar-dark .nav-link {
text-decoration: none !important;
}
Index.php
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<div class="container-fluid">
<a href="" class="navbar-brand"><?php echo ($sitename); ?></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Put menu links in the navbar -->
<?php if ($this->countModules('menu')): ?>
<div class="collapse navbar-collapse" id="mainmenu">
<jdoc:include type="modules" name="menu" style="none" />
</div>
<?php endif; ?>
</div>
</nav>
text-decoration: underline
is applied to the a
tag. Therefore you need to
nav .navbar-dark
ANDa
nav.navbar-dark .nav-link a {
text-decoration: none;
}
to remove the line. !important
should only be needed if you have other CSS definitions modifying the text-decoration for a
elements.