1

Hello I'm a newcomer and I want to change the color of the font inside the navbar but cant find any solution, here is the code:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">testteee</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">About</a></li>
      <li><a href="#">Portofolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
<main>
  <header>
    <p>teste</p>
  </header>
</main>

CSS:

body {
  background-color: grey;
}
.navbar {
  background-color: purple;
  border: transparent;
  box-shadow: 0px 0px 0px 2px grey;
  margin: 0;
}
main {
  width: 60%;
  background-color: white;
  margin: 0 auto;
  box-shadow: 0.5px 0.5px 0.5px 0.5px grey;
}

Any additional tips would be great for my development :)

Luke
  • 3,985
  • 1
  • 20
  • 35
Igu
  • 25
  • 1
  • 8

4 Answers4

1

Use color in CSS to change a fonts color.

.navbar {
background-color: purple;
border: transparent;
box-shadow: 0px 0px 0px 2px grey;
margin: 0;

}

a{color:red;}

If you are using a framework and need it to change use !important. !important changes a style that was already set.

.navbar {
background-color: purple;
border: transparent;
box-shadow: 0px 0px 0px 2px grey;
margin: 0;

}

a{color:red!important;}
Jonny
  • 1,319
  • 1
  • 14
  • 26
  • It didn't work, I'm using codepen, maybe that is the reason that it is not working? – Igu Feb 17 '18 at 19:57
  • ok give me a min ill check it out. if you are trying to change the link colors this must be done in the a tag' – Jonny Feb 17 '18 at 20:03
  • I updated my answer to place color on the a tags. a tags have built in styling it has a default color and a underline or text decoration you need to change them specifically not by the parent. – Jonny Feb 17 '18 at 20:07
  • When I put style="color: white;" inside the tag it works, but is this the only way? It makes the code looks strange. – Igu Feb 17 '18 at 20:09
  • a tags have built in styling it has a default color and a underline or text decoration you need to change them specifically not by the parent – Jonny Feb 17 '18 at 20:10
  • I think the correct way of doing this is not with important, but css specificity. And changing whatever we need from bootstrap sass/less variables :) – zalog Feb 17 '18 at 20:37
  • i agree this is an option but it also depends if he or she is going to use the default css framework in another page – Jonny Feb 17 '18 at 20:42
  • Just one more question, about what @zalog said, there is another way of changing the color without the important? Because I'd to put !imporatant in every thing that I wanted to change in my navbar – Igu Feb 17 '18 at 21:26
  • @Igu, you can [check my answer](https://stackoverflow.com/a/48845660/2977191), I hope it helps. – zalog Feb 17 '18 at 22:16
1

This might be what you need, but I'd suggest you to to change this from sass/scss variables. It might be a long way because you have to learn how to build bootstrap css files in a nodejs environment, this can help.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        body {
          background-color: grey;
        }
        .navbar-custom {
          background-color: purple;
          border: transparent;
          box-shadow: 0px 0px 0px 2px grey;
          margin: 0;
        }
        .navbar-custom .navbar-header a,
        .navbar-custom .navbar-header a:hover {
          color: #fff;
        }
        .navbar-custom ul.navbar-nav li a:hover {
          background-color: gray;
          color: #fff;
        }
        .navbar-custom ul.navbar-nav a {
          color: #fff;
        }
        .navbar-custom ul.navbar-nav a:hover {
          color: blue;
        }

        main {
          width: 60%;
          background-color: white;
          margin: 0 auto;
          box-shadow: 0.5px 0.5px 0.5px 0.5px grey;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">About</a></li>
      <li><a href="#">Portofolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
<main>
  <p>main content</p>
</main>
</body>
</html>

Also, I think it's a bad practice and it's not scalable to use !important.

You can read something about when to use important and perhaps some css specificity :)

zalog
  • 683
  • 9
  • 21
  • To say something is bad practice that is valid and up to date code is misleading. !important simply over rules previous set styles that is all. If it was bad practice why is it usable and not depreciated? https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean – Jonny Feb 17 '18 at 22:23
  • Please take a look at bootstrap source code. Or other like bootstrap. Or you can read this [funny quote](https://twitter.com/stefsull/status/70631020352913408) :) Of course, there are a few potentially good use cases for !important, but I think it's not the case here. – zalog Feb 17 '18 at 22:34
  • I will have to agree with @zalog here, it is not the case to use the !important. – Igu Feb 18 '18 at 00:29
0

You can add font color to your nav css {color: #fff} or if you just want to change the text color of your links then .navbar a {color: #fff} for example. You can do the same for all variations of links .navbar a, .navbar a:hover, .navbar a:visited {color: #fff}

Keoki
  • 184
  • 4
  • 20
  • I've tried this before and it didn't work, such a basic problem and I can't find why this is happening – Igu Feb 17 '18 at 20:02
  • then your bootsrap is overriding changes to the css so .navbar { color: #fff !important} – Keoki Feb 17 '18 at 21:38
0

You can append color to the navbar class like so color: #whatevercoloryouchoose

it should look like this

.navbar {
 color: #whatevercoloryoulike;
 background-color: purple;
 border: transparent;
 box-shadow: 0px 0px 0px 2px grey;
 margin: 0;
}
RickD
  • 79
  • 13
  • Have you tried this? I'm sure this wouldn't be specific enough to override colors set on children elements of the navbar. – Luke Feb 17 '18 at 19:52
  • note a # is only for hex colors black would be #000000 you dont need # sign unless you are using these types of hex colors. you could use green, blue, black and so on. Add a real color for the example please. – Jonny Feb 17 '18 at 19:55