Skip to main content
D
default0vaokg78cv42
Inspiring
June 10, 2022
Answered

Bootstrap problems with navbar

  • June 10, 2022
  • 2 replies
  • 1445 views

I used bootstrap to create a navbar. It works well enough, but the dropdown link is lightned to the point where it is hard to read. The other links are solid white, but the dropdown link is about 50% transparent. I tried using the .show class to change it to solid white, but I was unsucessful. Please advise on how to update the code. Thanks.

    This topic has been closed for replies.
    Correct answer osgood_

    Create a new css stylesheet and link it to your page AFTER the link to the default Bootstrap css file. You never want to alter the default Bootstrap css file. Then add the below css to the newly created css style sheet:

     

    .nav-link.dropdown-toggle {
    color: #fff!important;
    }
    .nav-link.dropdown-toggle:hover {
    color: #ccc!important;
    }

     

    OR add a <style> </style> block AFTER the link to the default Bootstrap css file and add your updated css style there:

     

    <style>

    .nav-link.dropdown-toggle {
    color: #fff!important;
    }
    .nav-link.dropdown-toggle:hover {
    color: #ccc!important;
    }

    </style>
    }

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 10, 2022

    HTML:

    <nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-primary">

     

    CSS ~ change opacity from .5 to 1

    ====================

    .navbar-light .navbar-nav .nav-link {
    color: rgb(0, 0, 0, 1);
    }

     

    Result:

     

    Nancy O'Shea— Product User & Community Expert
    D
    default0vaokg78cv42Author
    Inspiring
    June 10, 2022

    Thanks very much, looks great. 

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    June 11, 2022

    So that you do not get confussed, Bootstrap is all that I need to start a new project. It is a complete library that is very very flexible to use. The best part is that it is uniform, meaning that anyone with Bootstrap experience can help you immediately rather than having to wade through a CSS and JavaScript mess created by some code junkie.

     

    In other words, listen to @Nancy OShea 👍❤

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      O
      osgood_
      Legend
      June 10, 2022

      Can you post the navbar code in the forum so we can see what navbar structure and Bootstrap classes you are using?

      D
      default0vaokg78cv42Author
      Inspiring
      June 10, 2022
      Thanks. here it is:
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="../css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
      <title>untitlted</title>
      </head>
      <body style="padding-top: 70px">
      <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">Direct Scientific</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent1">
         <ul class="navbar-nav mr-auto">
           <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
      <li class="nav-item active"> <a class="nav-link" href="#">Nuclear Instrumentation <span class="sr-only">(current)</span></a> </li>
           <li class="nav-item active"> <a class="nav-link" href="#">Shielding<span class="sr-only">(current)</span></a> </li>
      <li class="nav-item active"> <a class="nav-link" href="#">Sources<span class="sr-only">(current)</span></a> </li>
       
           <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Accessories</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Fume Hoods</a> <a class="dropdown-item" href="#">Marinelli Beakers</a>
      <a class="dropdown-item" href="#">Hazard Signage</a>
      <a class="dropdown-item" href="#">Herculite</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#">HEPA Vacs</a> </div>
       
                <li class="nav-item active"> <a class="nav-link" href="#">Search<span class="sr-only">(current)</span></a> </li>
      <li class="nav-item active"> <a class="nav-link" href="#">Contact<span class="sr-only">(current)</span></a> </li>
       
       </ul></div>
      </nav>
      <script src="../js/jquery-3.4.1.min.js"></script>
      <script src="../js/popper.min.js"></script>
      <script src="../js/bootstrap-4.4.1.js"></script>
      </body>
      </html>
      O
      osgood_Correct answer
      Legend
      June 10, 2022

      Create a new css stylesheet and link it to your page AFTER the link to the default Bootstrap css file. You never want to alter the default Bootstrap css file. Then add the below css to the newly created css style sheet:

       

      .nav-link.dropdown-toggle {
      color: #fff!important;
      }
      .nav-link.dropdown-toggle:hover {
      color: #ccc!important;
      }

       

      OR add a <style> </style> block AFTER the link to the default Bootstrap css file and add your updated css style there:

       

      <style>

      .nav-link.dropdown-toggle {
      color: #fff!important;
      }
      .nav-link.dropdown-toggle:hover {
      color: #ccc!important;
      }

      </style>
      }

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices