1

*Edit: This question has been answered sufficiently, and the problem I'm describing below apparently didn't exist in the first place, so it's moot anyway. Sorry, and thank you Sean Varnham!

I'm just learning to code for websites. I'm trying to make a navbar, based on the standard one from Bootstrap 5. It consists of several nav-item elements with nav-link elements inside them. I want to make the nav-link elements look the way I want them to.

I thought I should just be able to address the class in my CSS to overrule any styling about the same class that's in the Bootstrap CSS file. But the only way I've managed to do it is by either using !important (which, I've been told, is the lazy coder's way of doing it), by adding an ID to each link (which is very cumbersome), or by changing the class name (which is my current solution, see also the full navbar code in my CodePen here, but then what's the point of using Bootstrap?).

I've looked at the Bootstrap 5 CSS, and as far as I can see, the nav-link elements are only ever addressed as classes, which should be simple to overrule, right?

How I thought it would work:

.nav-link {
  color: red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link" aria-current="page" href="#">HOME</a>
</li>

Resulting in red letters.

But that doesn't happen (*edit: wait, it does work now. I don't know why it didn't before.) Three solutions that do work, but are workarounds:

1.

.nav-link {
  color: red !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link" aria-current="page" href="#">HOME</a>
</li>

2.

#navhome {
  color: red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link" id="navhome" aria-current="page" href="#">HOME</a>
</li>

3.

.nav-link2 {
  color: red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link2" aria-current="page" href="#">HOME</a>
</li>

What am I missing here?

AlexanderSplat
  • 41
  • 1
  • 9

3 Answers3

2

The key thing with CSS is how specific you are (a.k.a specificity).

There are a couple ways things you can do to achieve what you're trying to do:

  1. Load your custom stylesheet after the Bootstrap stylesheet,
  2. Create identical/more specific references to the class you're trying to change.

The first bit is as easy as placing your custom stylesheet after your Bootstrap one in the HTML, PHP etc. (depending on how you're loading in stylesheets).

The second item would be achieved by doing something like this:

.nav-link a {
    color: red;
}

This way, you're specifically targeting the anchors within the .nav-link classes. If this doesn't work, you might need to be more specific by adding a parent node's ID attribute or a parent class, for example:

#targetID .nav-link a {
    color: red;
}

Note: You should try to reduce specificity to the CSS properties which are hard to overwrite, because being too specific and adding lots of classes can quickly balloon the size of a stylesheet. This can then have knock-on effects for things like page speed etc.

You can find more information on specificity here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Sean Varnham
  • 56
  • 4
  • Thanks! I had indeed not thought about the order of the stylesheets and how that might affect which css styling comes first. Also, for some reason, the way I originally thought it would work does work now. I don't know why it didn't last time I checked it. I don't think I changed anything. But either way, this is good information to have! – AlexanderSplat Apr 06 '21 at 10:43
  • No problem, glad it's working now. – Sean Varnham Apr 06 '21 at 10:58
1

using bootstrap components for making custom components just make everything so much harder i had this problem before when i was trying to make a custom pagination with bootstrap pagination components and then i realized that it's much more easier and cleaner to use html and css . use bootstrap components if you really want that specific style or just want to build something fast

ramtinrfh
  • 11
  • 1
  • Agreed. Although I do think using their code and trying to change every component, or working out how they did a particular thing is very educational. But yeah, once you're good enough at coding yourself, you should probably only use them when you need to do something fast and not too original. – AlexanderSplat Apr 06 '21 at 12:06
0

This is to change your .css file

color: white; change to color: red;

.nav-link2 {
font-family: 'roboto';
font-size: 14px;
font-weight: 300;
color: white;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 28px;
padding-bottom: 29px;}
Amol
  • 142
  • 1
  • 1
  • 9