CSS for new header

[nmueller]

Hi, Everyone!

I'm working on a new header for our LibGuides (https://libguides.nvcc.edu/) and there's something that I can't figure out. When I click on either of the drop-down menus, then move my mouse outside of the dropdown buttons, the text of the buttons turns white. I want it to stay black. I've attached the HTML and CSS code that I'm using. I'm hoping that someone is willing to review the code to try to find the problem. I would appreciate it very much. Thank you!

[nmueller]

Here's the HTML:

<script src="https://kit.fontawesome.com/a78f3fec51.js" crossorigin="anonymous"></script>

<div id="custom-header">
<div id="branding-area">
<div class="container">
<div class="row" style="padding: 10px 10px;">
<div class="col-md-6">
<a href="https://www.nvcc.edu"><span style="font-weight: bold; color: #C99700;">NOVA</span></a>
<a href="https://www.nvcc.edu/academics/library/index.html"><span style="font-weight: ; color: black;">Libraries</span></a>
</div>
</div>
</div>
</div>
</div>

<div id="header-nav">
<nav class="navbar navbar-default" >
<div class="container">

<!-- 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="#main-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>
<p class="navbar-text visible-xs pull-right" id="menu-text">Menu</p>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="https://libguides.nvcc.edu/az.php"><span class="fa-solid fa-coins"></span> Databases</a></li>
<li><a href="https://libguides.nvcc.edu/"> <span class="fa-solid fa-location-dot"></span> Research Guides</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="fa-solid fa-file-pen"></span> Citing Sources <span class="fa-solid fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="https://libguides.nvcc.edu/APACitationStyle">APA</a></li>
<li><a href="https://libguides.nvcc.edu/MLACitationStyle">MLA</a></li>
<li><a href="https://libguides.nvcc.edu/ChicagoTurabian">Chicago/Turabian</a></li>
<li><a href="https://libguides.nvcc.edu/citingmedia">Citing Media</a></li>
<li><a href="https://libguides.nvcc.edu/plagiarism">Plagiarism</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="fa-solid fa-question"></span> Get Help <span class="fa-solid fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="https://libguides.nvcc.edu/sb.php?subject_id=72961">How to...</a></li>
<li><a href="https://www.nvcc.edu/academics/library/chat.html">24/7 Chat</a></li>
<li><a href="https://libanswers.nvcc.edu/">FAQs</a></li>
<li><a href="https://www.nvcc.edu/academics/library/hours-location-staff.html">Hours, Locations, Staff</a></li>
</ul>
</li>
</ul>

</div>

</div>
</nav>
</div>

[nmueller]

Here's the CSS:

<style>

/* Sets global font styles */
* {
font-weight: ;
}

/*Sets container size*/
.container {width: 75%;}

/*Sets font size of breadcrumbs*/
#s-lib-bc .breadcrumb {
font-size: 14px;
}

/*Styles body*/
body {
padding: 0px 0px;
font-family: Lato, sans-serif;
font-size: 16px;
}

/*BRANDING AREA*/

/*Styles background of branding area*/
#branding-area {
background-color: white;
}

/*Styles links in branding area*/
#branding-area a {
font-family: Lato, sans-serif;
font-size: 30px;
color: ;
}

/*NAVBAR AREA*/

/*Styles background of navbar area*/
#header-nav .navbar-default {
background-color :#046A38;
border-color: #046A38;
border-radius: 0px;
box-shadow: 0 6px 6px gray;
}

/*Styles links in navbar*/
#header-nav .navbar-default .navbar-nav>li>a {
font-family: Lato, sans-serif;
font-size: 16px;
color: white;
font-weight: ;
}

/*Styles links in navbar on hover*/
#header-nav .navbar-default .navbar-nav>li>a:hover {
background-color: #F4C430;
border-color: #F4C430;
color: black;
text-decoration: ;
}

/*Styles background color of dropdown menus*/
#header-nav .navbar-nav .open .dropdown-menu {
background-color: white;
}

/*Styles links in dropdown menus*/
#header-nav .navbar-default .navbar-nav .open .dropdown-menu>li>a {
font-size: 16px;
color: black;
font-weight: ;
}

/*Styles links in dropdown menus on hover*/
#header-nav .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
background-color: lightgray;
color: black;
text-decoration: ;
}

/* */
.navbar .navbar-nav>.open>a,
.navbar .navbar-nav>.open>a:focus,
.navbar .navbar-nav>.open>a:hover {
background-color: #F4C430;
border-color: #F4C430;

text-decoration: ;
}

/*LIBGUIDES HOMEPAGE*/

/* Adds background color to list items on LibGuides homepage > "All Guides" tab */
.s-lib-border-round {
background-color: #f5f5f5;
border-color: #d9d9d9;
}

/*LIBGUIDES*/
/*Styles box titles*/
.s-lib-box .s-lib-box-title {
font-size: 16px;
}

/*RESPONSIVE SETTINGS*/

/* */
.navbar-toggle:before {
content:"Menu";
left:-50px;
top:4px;
position:absolute;
width:50px;
}

/*Media queries for mobile screens*/
@media (max-width: 767px) {

/*Media queries for non-mobile screens*/
@media (min-width: 768px) {

</style>

[jwalz]

I think that particular trigger is coming from the HOVER option and is possibly in the selector .navbar .navbar-nav>.open>a:hover You might want to add a color code there for black #000000 and maybe also add !Important to it. (SEE: https://www.w3schools.com/css//css_important.asp )

BTW - my favorite place to check on CSS codes and other coding is the W3Schools page. Lots of good examples and ways to play with things to test them out.

[nmueller]

Hi, Jennifer,

Thank you for your quick reply. Adding the color code by itself didn't have any effect, but adding "!important" after the color code fixed the problem.

Thank you!

Nathan

[mhanlin]

Nathan, it looks like you got it figured out but you want to want to use the pseudo class :hover.  In this case, it would have been:
#header-nav .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {color:black; } You also want to avoid !important as it'll overwrite parent CSS in many cases. Sorry, I missed all of this and didn't respond sooner.

[nmueller]

Nathan, it looks like you got it figured out but you want to want to use the pseudo class :hover.  In this case, it would have been:
#header-nav .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {color:black; } You also want to avoid !important as it'll overwrite parent CSS in many cases. Sorry, I missed all of this and didn't respond sooner.

Thanks for the tip, Mary!