Search code examples
bootstrap-4navbarfont-sizefont-family

I cant change the font size or family in my bootstrap 4 navbar

Hi I have tried multiple different solutions from this site and others but I cant figure out what is wrong with my code. I am very new to coding so excuse me if it's obvious.

I cant change my font-family or size etc of the nav links from the css.

Here is the code.

 </head>
  <body>
    <section class="header">
      <div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="#"
            ><img
              src="images/Twisted-white-flat-7-7's.png"
              alt="the-twisted-spirit-7-7s"
              height="100px"
          /></a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo02"
            aria-controls="navbarTogglerDemo02"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
              <li class="nav-item active">
                <a class="nav-link" href="#" ;
                  >Home <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" ;>Link</a>
              </li>
            </ul>
            <!-- <form class="form-inline my-2 my-lg-0">
              <input
                class="form-control mr-sm-2"
                type="search"
                placeholder="Search"
              />
              <button
                class="btn btn-outline-success my-2 my-sm-0"
                type="submit"
              >
                Search
              </button>
            </form> -->
          </div>
        </nav>
      </div>
    </section>
  </body>

If you need anything else please ask. Thank you.

Solution

  • Thanks for all your help guys. When asdf prompted me to go into developer tools I found out the correct syntax and identifiers to get the look I wanted through seeing an all ready identifying color of the link I wanted to change. Before that I was using all types of crazy combinations.

    The code I needed was

    .navbar-dark .navbar-nav .nav-link {
  font-family: "Six Caps";
  font-size: xx-large;
}

    Thanks again for all your help guys, much appreciated.

    p.s someone asked what framework I was using and it is bootstrap 4.