Joomla 4 与 Bootstrap 5 模板自定义 css 不工作

Question

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>

https://jsfiddle.net/nLp4je5m/

Answer 1

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.