Bootstrap Navbar Brand and Links colour not matching when using the whole navbar to change the font and colour

user_15596222 0
Viewed 97

I am new to css and trying to get my navbar brand and navbar links to look the same size and same colour but when I choose the whole navbar to change the font and the colour every link inherits the font but not the colour also branding stays unaffected

I want to know what changes I can make to make both similar here is the navbar code. And here is the css that I am using to change the font and colour along with the result.

#mainNavbar {
  font-size: 2em;
  color: #e84545;
  font-weight: 200;
}
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav class="navbar navbar-expand-dark navbar-dark navbar-expand-md" id="mainNavbar">
  <a href="#" class="navbar-brand" id="navbar-brand">CANDY</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links" aria-label="Expand or Collapse The NavBar">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="nav-links">
    <ul class="navbar-nav">
      <li class="navbar-item">
        <a href="#home" class="nav-link">HOME</a>
      </li>
      <li class="navbar-item">
        <a href="#about" class="nav-link">ABOUT</a>
      </li>
      <li class="navbar-item">
        <a href="#tickets" class="nav-link">TICKETS</a>
      </li>

    </ul>
  </div>
</nav>

bootstrap-4 css html
2 Answers

The text you are wanting to change is in <a> tags so you will need to apply your CSS to that tag.

#mainNavbar a {
  font-size: 2em;
  color: #e84545;
  font-weight: 200;
}
user_121898280

If you just need to override the colors and font settings for the links in your navbar, then you can use @Douglas’ solution. If you need to have the normal navbar behavior (active class and hover effects), then you’ll need to override Bootstraps’ styles. You’ll need to look at each item that has font color and size and, using your browser’s Developer Tools, identify where the font settings are coming from, and then override those settings in your own CSS styles in your page.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
    /*#mainNavbar {
        font-size: 2em;
        color: #e84545;
        font-weight: 200;
    }*/

    .navbar-dark .navbar-brand {
        font-size: 2rem;
        font-weight: 200;
        color: #e84545;
    }

    .navbar-dark .navbar-brand:hover {
        color: rgba(232, 69, 69, 0.9);
    }

    .navbar-dark .navbar-nav .nav-link {
        color: rgba(232, 69, 69, 0.6);
        font-size: 2em;
        font-weight: 200;
    }

    .navbar-dark .navbar-nav .nav-link.active {
        color: #e84545;
    }

    

    .navbar-dark .navbar-nav .nav-link:hover {
        color: rgba(232, 69, 69, 0.9);
    }
</style>

<nav class="navbar navbar-expand-dark navbar-dark bg-dark navbar-expand-md" id="mainNavbar">
    <a href="#" class="navbar-brand" id="navbar-brand">CANDY</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links" aria-label="Expand or Collapse The NavBar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav-links">
        <ul class="navbar-nav">
            <li class="navbar-item">
                <a href="#home" class="nav-link active">HOME</a>
            </li>
            <li class="navbar-item">
                <a href="#about" class="nav-link">ABOUT</a>
            </li>
            <li class="navbar-item">
                <a href="#tickets" class="nav-link">TICKETS</a>
            </li>

        </ul>
    </div>
</nav>

You can adjust the transparency for the colors to meet your needs for letting the user know there's a difference between menu items.

user_10119840
Related