My current navbar is a sticky dropdown navbar that will dropdown on a hover rather than a click. I'm trying to have a bottom border on my tabs. It works when the mouse is hovering over the tab, but once the mouse leaves the tab (even to just the dropdown menu items), the bottom border disappears, even though the dropdown menu is still open. All the other hover actions I have on the tabs also go away (I had then text color set to black when hovered over). It makes sense that once the mouse isn't hovering, the changes wouldn't stay there, but the active tag doesn't work, so I'm stuck.
Basically, I want the bottom border to remain while the dropdown menu is open.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ExhibitLab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
$(document).ready(function(){
$(".dropdown, .btn-group").hover(function(){
var dropdownMenu = $(this).children(".dropdown-menu");
if(dropdownMenu.is(":visible")){
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<!--Navbar with dropdown menu-->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" style="background-color:white" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="home.html" style="color:#002873; font-size:35px;font-weight:bold;">ExhibitLab</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="font-size:15px">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About</a>
<ul class="dropdown-menu">
<li>History</li>
<li>Timeline</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Publication</a>
<ul class="dropdown-menu">
<li>Report</li>
<li>Additional Sources</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> mail_outline </li>
<li>search</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
And my CSS:
#media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{
display: block;
}
.dropdown-menu{
margin-top: 0;
}
.dropdown-toggle{
margin-bottom: 2px;
}
.navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{
margin-bottom: 0;
}
}
.navbar-nav a {
padding: 12px 20px;
text-decoration: none;
}
.navbar-nav li.dropdown a{
border-bottom: 5px solid transparent;
color:#787878;
}
.navbar-nav li.dropdown a:hover{
border-bottom: 5px solid #002873;
color: black !important;
background-color: transparent !important;
}
.navbar-nav ul.dropdown-menu {
box-shadow:none;
}
.navbar-nav ul.dropdown-menu a:hover{
border-bottom: 5px solid transparent;
}
You are not targeting the actual li and a tags properly.
You can simply do this .navbar-nav li:hover > a {} and this will keep the border bottom active when hovering over the submenu items.
Run snippet below and click Full Page to see the menu item working nicely.
$(document).ready(function() {
$(".dropdown, .btn-group").hover(function() {
var dropdownMenu = $(this).children(".dropdown-menu");
if (dropdownMenu.is(":visible")) {
dropdownMenu.parent().toggleClass("open");
}
});
});
#media screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu,
.btn-group:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0;
}
.dropdown-toggle {
margin-bottom: 2px;
}
.navbar .dropdown-toggle,
.nav-tabs .dropdown-toggle {
margin-bottom: 0;
}
}
.navbar-nav a {
padding: 12px 20px;
text-decoration: none;
}
.navbar-nav li.dropdown a {
border-bottom: 5px solid transparent;
color: #787878;
}
.navbar-nav li:hover>a {
border-bottom: 5px solid #002873;
color: black !important;
background-color: transparent !important;
}
.navbar-nav ul.dropdown-menu {
box-shadow: none;
}
.navbar-nav ul.dropdown-menu a:hover {
border-bottom: 5px solid transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>ExhibitLab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
</script>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<!--Navbar with dropdown menu-->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" style="background-color:white" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="home.html" style="color:#002873; font-size:35px;font-weight:bold;">ExhibitLab</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="font-size:15px">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About</a>
<ul class="dropdown-menu">
<li>History</li>
<li>Timeline</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Publication</a>
<ul class="dropdown-menu">
<li>Report</li>
<li>Additional Sources</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> mail_outline </li>
<li>search</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Add this to your CSS:
.dropdown .dropdown-menu li a{
border-bottom: 5px solid #002873;
}
Related
Description: I'm trying to create a navbar. I am using the
bootstrap 4 framework for
that but the problem is I have simply copied the simple navbar code without dropdown
and when I'm trying to create a custom dropdown then it is showing in the main menu due
to which the height of the main menu bar also increases. How can I show a sub-menu
outside the main menu bar?
*{
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: auto;
height: 100%;
}
ul li{
margin: 0;
/* border: 1px solid turquoise; */
width: 9em;
padding: 5px 0;
text-align: center;
position: relative;
}
/* Showing border bottom animation for the main-menu */
ul li::after{
content: '';
position: absolute;
border-bottom: 3px solid #f3007f;
transform: scale(0, 1);
transition: transform .5s ease;
width: 100%;
left: 0;
}
ul li:hover::after{
transform: scale(1, 1);
}
/* Showing background: black and font color:white when hovering over the main-menu */
ul li a {
display: block;
color: white;
}
ul li a:hover{
background-color: black;
color: white;
}
.logo {
width: 4vw;
}
/* Styling the main menu */
.navbarbg {
background: #10044a;
color: white;
font-weight: bold;
}
/* Centering the main-menu elements */
.listpos{
justify-content: center;
}
/* This code is for hiding sub-menus */
ul li ul li {
display: none;
}
/* This code is for showing sub-menus when hovering over main menu */
ul li:hover ul li {
display: block;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<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 rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/f3e31b33a9.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbarbg">
<div class="col-md-2">
<img src="./images/ICC-Mens-T20-World-Cup-2021.jpg" class="img-fluid logo" alt="">
</div>
<div class="collapse navbar-collapse col-md-8 listpos">
<ul class="navbar-nav">
<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="#">Matches</a></li>
<li class="nav-item"><a class="nav-link" href="#">Standings</a></li>
<!-- This is the dropdown code Starting -->
<li class="nav-item">
<a class="nav-link">Dropdown</a>
<ul class="" aria-labelledby="navbarDropdown">
<li><a class="" href="#">Action</a></li>
<li><a class="" href="#">Another action</a></li>
</ul>
</li>
<!-- This is the dropdown code Ending -->
<li class="nav-item"><a class="nav-link" href="#">News</a></li>
<li class="nav-item"><a class="nav-link" href="#">Videos</a></li>
</ul>
</div>
<div class="col-md-2 text-right">
<b>Search</b>
<span class="ml-1">
<i class="fa-solid fa-magnifying-glass"></i>
</span>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
At the very top of your this is the dropdown is starting...
A very important dropdown class is missing from the li. It should read like this <li class="nav-item dropdown">.
Each of the links in the dropdown could then also use a class added too. Each of the links should contain class="dropdown-item"
Hopefully that will fix things but other people may spot things that I didn't.
My bootstrap navbar, customized, is collapsing correctly but the menu button during collapse isn't showing up. If I click around the area, I can find a link that lets me drop the dropdown, but I can't see the button. I think maybe my customization is causing it to be invisible or behind the actual navbar. Here is my HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<style>
.navbar-custom {
background-color: #141414;
width: 100%;
float: none;
margin:0;
padding:5px;
font-size: 14px;
letter-spacing: .1em;
text-transform: uppercase;
}
.navbar-nav > li{
margin-left:5px;
margin-right:15px;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #fff;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #85b0be;
}
.navbar-custom .navbar-logo {
margin-right: 60%;
}
.navbar-custom .navbar-nav li>a:hover{
border-bottom: 3px solid;
bottom: 0;
content: " ";
left: 0;
width: 100%;
}
.text-my-own-color {
color: #85b0be !important;
}
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #85b0be !important;
border-color: white !important;}
</style>
</head>
<body>
<nav class="navbar navbar-custom navbar-expand-sm justify-content-end">
<a class="navbar-logo" href="#">
<img style="opacity:0.7;filter:alpha(opacity=40); width:50px;" src="{% static 'img/logo.bmp' %}" alt="">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbar" aria-expanded="false">
<i class="fa fa-bolt color-white"></i>
</button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</body>
Running the code above will generate a navbar that collapses at a certain screen width, but I just can't find where the collapse button is going. Thanks for any help!
Add this CSS:
.navbar-toggler {
background-color: orange !important;
}
You can also check if the CSS works without the !important. If so, you can drop it. Much cleaner CSS.
Simple question here I can't figure out (probably the solution is ultra-easy I just cannot see it). If you hover the mouse on the a-element, the :before style takes the width till the end of the page.
Why is that? Any solutions to make it inherit the width from the li-element only (make it always as wide as the navigation link)?
/* navbar style */
#sidebar-wrapper {
}
.navbar {
padding: 0px;
}
.navbar li:before {
content: '';
position: absolute;
top: 0px;
height: 3px;
width: 100%;
background-color: #aaa;
transition: 0.2s ease;
z-index: -1;
}
.navbar li:hover:before {
height: 100%;
}
.navbar li:first-child:before {
background-color: #ec1b5a
}
.navbar li:nth-child(2):before {
background-color: #3DEC1B
}
.navbar li:nth-child(3):before {
background-color: #D3EC1A
}
.navbar li:nth-child(4):before {
background-color: #1B9AEC
}
<head>
<meta charset="utf-8">
<title>Matt Chowski's portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<nav class="nav justify-content-between" id="sidebar">
<ul class="nav">
<li class="navbar-brand"><a class="nav-link">Mateusz Wojciechowski</a></li>
</ul>
<ul class="nav navbar" id="navlinks">
<li><a class="nav-link active" href="#">Home</a></li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Gallery</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
Thank you for all the help <3
Check out this code.
All I did is added position: relative; to li and also added display: flex to ul
https://codepen.io/Izulito/pen/xXmOqq
I'm using Bootstrap 3 for my website. I have the usual .navbar on the page, and it works well, except for one thing that's out of my fashion. There's like a little dividing line between the .navbar-collapse and .navbar-header when the screen shrinks to the hamburger menu. I've boldened it in the pic.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Stuson.com</title>
<meta name="description" content="Stuson.com is a social media platform for students, by students.">
<meta name="author" content="Stuson Dev Team">
<link href="https://fonts.googleapis.com/css?family=PT+Sans|Roboto" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css\essentials.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="form">
<div class="form-group">
<input type="text" class="form-control hidden-xs" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="hidden-lg hidden-md">Search</span>
</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="http://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/essentials.js"></script>
</body>
</html>
CSS
#noBorder {
border-style: none;
border-radius: 0;
}
#transparent {
background-color: transparent;
}
body {
font-family: "PT Sans", sans-serif;
font-weight: 300;
}
.navbar {
border-style: none;
border-radius: 0;
background-color: #38ba7d;
}
.navbar .navbar-header {
border-style: none;
border-radius: 0;
}
.navbar .navbar-header > .navbar-toggle,
.navbar .navbar-header .navbar-toggle:hover,
.navbar .navbar-header .navbar-toggle:focus {
border-style: none;
border-radius: 0;
background-color: transparent;
}
.navbar .navbar-header .navbar-brand {
color: #fff;
}
.navbar .navbar-collapse {
border-style: none;
border-radius: 0;
}
.navbar .navbar-collapse ul li > a {
color: #fff;
}
.navbar .navbar-collapse form {
display: flex;
flex-direction: row;
border-style: none;
border-radius: 0;
}
.navbar .navbar-collapse form input {
width: 250px;
}
#media (max-width: 786px) {
.navbar .navbar-collapse form input {
width: 10px;
}
}
.navbar .navbar-collapse form .btn {
background-color: transparent;
border-style: none;
border-radius: 0;
}
How can I avoid this? I've tried using border: none on both .navbar-collapse and .navbar-header, but to no avail.
Actually the 'border' is caused by a box-shadow, so add this:
.navbar .navbar-collapse{
box-shadow:none;
}
You can use this CSS code snippet:
#media (max-width: 768px) {
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border: 0;
}
}
Setting .navbar-default or .navbar-inverse to 0 should do the trick.
.navbar-default {
border: 0;
}
When you click on the About tab, it will show a drop down. The elements of the dropdown have light blue background. Now, when you move your mouse away from About when the drop down is still active then the background is white. I want to change the white background to the light blue background. How can i achieve this? I appreciate your help. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Company Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.navbar {
margin-bottom: 0;
background-color: #B21A09;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.dropdown-menu {
background-color: #5A79A5;
}
.navbar-nav li a:hover, a:visited, .navbar-nav li.active a {
background-color: #5A79A5 !important;
}
.dropdown-menu li a:hover {
background-color: #9CAAC6 !important;
}
a:active.dropdown-toggle {
background-color: #5A79A5 !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default main">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
With how your current CSS is laid out, try to use:
CSS
.open .dropdown-toggle{
background-color: #9CAAC6 !important;
}
HTML
<li class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
ABOUT
<span class="caret"></span>
</a>
</li>
Example from bootstrap docs
Usage of .open & .dropdown-toggle
This question has been answered before:
#Bimal Das
Try to override using the css below:
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
background-color: #76cded !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Company Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.navbar {
margin-bottom: 0;
background-color: #B21A09;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.dropdown-menu {
background-color: #5A79A5;
}
.navbar-nav li a:hover, a:visited, .navbar-nav li.active a {
background-color: #5A79A5 !important;
}
.dropdown-menu li a:hover {
background-color: #9CAAC6 !important;
}
a:active.dropdown-toggle {
background-color: #5A79A5 !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default main">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Typically you would use the anchor link state a:link which allows you to style a link that doesn't have a mouse over it. This would look something like this:
a:link{background-color: light-blue;}
However your code shows white being !important and can't be overwritten, so you should remove this styling before executing the above code.