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 >
  <div >
    <a href="" ><?php echo ($sitename); ?></a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <!-- Put menu links in the navbar -->
    <?php if ($this->countModules('menu')): ?>
    <div  id="mainmenu">
      <jdoc:include type="modules" name="menu" style="none" />
    </div>
    <?php endif; ?>
  </div>
</nav>

https://jsfiddle.net/nLp4je5m/

CodePudding user response：

text-decoration: underline is applied to the a tag. Therefore you need to

1. remove the space between nav .navbar-dark AND
2. add a

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.