I have used the TWBSColor web site to style the navbar so have my own css style sheet that overrides certain aspects of the locked Bootstrap style sheet and I have incorporated these rules into my site style sheet. Do I create a new rule to override the Bootstrap rule? Here is the part of my style sheet relating to the navbar: .navbar { background-color: #2d3fab; } .navbar .navbar-brand { color: #ffffff; } .navbar .navbar-brand:hover, .navbar .navbar-brand:focus { color: #ff0022; } .navbar .navbar-text { color: #ffffff; } .navbar .navbar-text a { color: #ff0022; } .navbar .navbar-text a:hover, .navbar .navbar-text a:focus { color: #ff0022; } .navbar .navbar-nav .nav-link { color: #ffffff; border-radius: .25rem; margin: 0 0.25em; } .navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus { color: #ff0022; } .navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus { color: #ff0022; background-color: #2d3fab; } .navbar .navbar-toggle { border-color: #2d3fab; } .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { background-color: #2d3fab; } .navbar .navbar-toggle .navbar-toggler-icon { color: #ffffff; } .navbar .navbar-collapse, .navbar .navbar-form { border-color: #ffffff; } .navbar .navbar-link { color: #ffffff; } .navbar .navbar-link:hover { color: #ff0022; } @media (max-width: 575px) { .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item { color: #ffffff; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ff0022; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ff0022; background-color: #2d3fab; } } @media (max-width: 767px) { .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item { color: #ffffff; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ff0022; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ff0022; background-color: #2d3fab; } } @media (max-width: 991px) { .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item { color: #ffffff; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ff0022; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ff0022; background-color: #2d3fab; } } @media (max-width: 1199px) { .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item { color: #ffffff; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ff0022; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ff0022; background-color: #2d3fab; } } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item { color: #ffffff; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ff0022; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ff0022; background-color: #2d3fab; }
... View more