0

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/

9944990
  • 444
  • 1
  • 5
  • 16
  • Where is the element with class `nav-link`? – coreuter Dec 19 '22 at 10:38
  • One reason why the CSS does not work is probably the space between `nav` and `.navbar-dark`. It should be `nav.navbar-dark .nav-link`. – coreuter Dec 19 '22 at 10:49
  • @coreuter The nav-link is created in when page is parsed and I see the li with a link which has nav-link class. I did change it as you requested still not working. – 9944990 Dec 19 '22 at 11:03
  • Can you please share parts of the generated HTML so we can reproduce the behavior (e.g. share a JSFiddle or similar)? Right now it's guesswork because we don't know the actual structure. – coreuter Dec 19 '22 at 11:13
  • 1
    Here comes the JSFiddle link: https://jsfiddle.net/nLp4je5m/ – 9944990 Dec 19 '22 at 11:30

1 Answers1

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.

coreuter
  • 3,331
  • 4
  • 28
  • 74
  • this may be a caching problem?! I can still see `text-decoration: none` being applied to `.nav-link` not `.nav-link a` – coreuter Dec 19 '22 at 12:14
  • I have already cleared cache. Can this be order of css files loaded? I mean user.css loads before bootstrap.css? – 9944990 Dec 19 '22 at 12:18
  • try to load your custom css after bootstrap.css – coreuter Dec 19 '22 at 12:23
  • 1
    Actually I added the code using scss to template.css and it is working. I remove user.css and add my custom codes using scss. Thank you for your help. – 9944990 Dec 19 '22 at 12:31