Skip to main content
Participant
December 19, 2021
Answered

Navbar

  • December 19, 2021
  • 2 replies
  • 448 views

Dreamweaver 21  basic navbar How to change the color of the links?

    This topic has been closed for replies.
    Correct answer Nancy OShea

    If you're using Bootstrap, you can replace Bootstrap CSS with your favorite Bootswatch Theme.  There are 25 free themes to choose from.

    https://www.bootstrapcdn.com/bootswatch/

     

    Example with Sketchy Theme:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/sketchy/bootstrap.min.css" integrity="sha384-RxqHG2ilm4r6aFRpGmBbGTjsqwfqHOKy1ArsMhHusnRO47jcGqpIQqlQK/kmGy9R" crossorigin="anonymous">

     

    You can change navbar styles with built-in Bootstrap color classes.

    https://getbootstrap.com/docs/4.0/components/navbar/#color-schemes

     

    <nav class="navbar navbar-dark bg-dark">
      <!-- Navbar Dark -->
    </nav>
    
    <nav class="navbar navbar-dark bg-primary">
      <!-- Navbar Dark with Primary background color -->
    </nav>
    
    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
      <!-- Navbar light with custom background-color -->
    </nav>
    

     

    Or you can create custom navbar styles in your custom stylesheet, below Bootstrap CSS.

    .navbar-nav > li > a {
        color: green;
    }
    
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:active,  
    .navbar-nav > li > a:focus {
        color: tomato;
    }
    

     

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    December 19, 2021

    If you're using Bootstrap, you can replace Bootstrap CSS with your favorite Bootswatch Theme.  There are 25 free themes to choose from.

    https://www.bootstrapcdn.com/bootswatch/

     

    Example with Sketchy Theme:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/sketchy/bootstrap.min.css" integrity="sha384-RxqHG2ilm4r6aFRpGmBbGTjsqwfqHOKy1ArsMhHusnRO47jcGqpIQqlQK/kmGy9R" crossorigin="anonymous">

     

    You can change navbar styles with built-in Bootstrap color classes.

    https://getbootstrap.com/docs/4.0/components/navbar/#color-schemes

     

    <nav class="navbar navbar-dark bg-dark">
      <!-- Navbar Dark -->
    </nav>
    
    <nav class="navbar navbar-dark bg-primary">
      <!-- Navbar Dark with Primary background color -->
    </nav>
    
    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
      <!-- Navbar light with custom background-color -->
    </nav>
    

     

    Or you can create custom navbar styles in your custom stylesheet, below Bootstrap CSS.

    .navbar-nav > li > a {
        color: green;
    }
    
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:active,  
    .navbar-nav > li > a:focus {
        color: tomato;
    }
    

     

    Nancy O'Shea— Product User & Community Expert
    Participant
    December 19, 2021

    Thank You  Nancy that was a very good reply. It got me out of my mental block.  In the nav div  I deleted the bg component for transparent navbar and changed navbar to white.

    <nav class="navbar navbar-expand-lg navbar-white ">

    https://q17news.us   BTW the regular site   http://q17news.com

    Nancy OShea
    Community Expert
    Community Expert
    December 19, 2021

    Good job!

     

    Nancy O'Shea— Product User & Community Expert
    Participant
    December 19, 2021