Here is my code, I want the dropdown not to shade gray how it is, but rather highlight similar to the other links on the navbar.
li {
text-align: center;
}
.dropdown-toggle {
background-color: white;
color: #0066ff;
border-color: white;
}
.dropdown-toggle:hover {
background-color: white;
border-color: white;
color: #0033cc;
}
.dropdown-toggle:active {
background-color: white;
border-color: white;
color: #0033cc;
box-shadow: none;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Desktops
</button>
<div class="dropdown-menu">
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</body>
</html>
I tweaked the bootstrap styling at the top, and also have my failed attempt with the .dropdown-toggle:active
I came up with this... not sure if that's what you asked for though.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<style>
li {
text-align: center;
}
.dropdown-toggle {
background-color: white;
color: #0066ff;
border-color: white;
}
.dropdown-toggle:hover {
background-color: white;
border-color: white;
color: #0033cc;
}
.dropdown-toggle:active {
background-color: white;
border-color: white;
color: #0033cc;
box-shadow: none;
}
#button_desktop:focus {
background-color: white;
color: #0033cc;
outline: none;
border: none;
box-shadow: none;
}
</style>
<body>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="button_desktop">
Desktops
</button>
<div class="dropdown-menu">
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</body>
</html>
Have a great day!
This worked for me.try it
.dropdown-toggle:active, .open .dropdown-toggle, dropdown-toggle:hover{ background:white !important; color:#000 !important; box-shadow:#000 important!;}
.dropdown-toggle[aria-expanded="true"] { background:#FFF !important; color:#000 !important; border-color:#fff important!; box-shadow:#fff important!;}
Related
I am trying to make the list items in bootstrap navbar stretch all the width of the page in the mobile view but it doesn't work.
I tried some of the tutorials here but none worked. I even tried *{margin:0;padding:0;} in CSS but it doesn't work. I want the navbar list elements width to stretch to the width of the page in mobile view.
This is how it looks in browser:
#header-nav {
background-color: rgb(162, 162, 162);
border-radius: 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
.navbar-brand a {
text-decoration: none;
}
.navbar-brand h1 {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
color: black;
text-shadow: 1px 1px 1px white;
}
.navbar-brand a:hover,
a:focus {
text-decoration: none;
}
.nav-item a {
color: black;
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-align: center;
background-color: white;
}
.nav-item a:hover,
a:focus,
a:active {
color: black;
background-color: rgb(188, 188, 188);
}
.navbar-nav {
border-top: 3px solid black;
}
#chickenNav,
#beefNav {
border-bottom: 2px solid black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav id="header-nav" class="navbar">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">
<a href="index.html">
<h1>Food, LLC</h1>
</a>
</div>
</div>
<button class="navbar-toggler d-block d-sm-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">=</button>
<div class="collapse navbar-collapse" id="collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a id="chickenNav" class="nav-link" href="#">Chicken</a>
</li>
<li class="nav-item">
<a id="beefNav" class="nav-link" href="#">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sushi</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
You can just use Bootstrap's spacing classes to adjust as needed. I'm removing the horizontal padding from the container with px-0 and adding it back onto the nav header with px-2.
#header-nav {
background-color: rgb(162, 162, 162);
border-radius: 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
.navbar-brand a {
text-decoration: none;
}
.navbar-brand h1 {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
color: black;
text-shadow: 1px 1px 1px white;
}
.navbar-brand a:hover,
a:focus {
text-decoration: none;
}
.nav-item a {
color: black;
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-align: center;
background-color: white;
}
.nav-item a:hover,
a:focus,
a:active {
color: black;
background-color: rgb(188, 188, 188);
}
.navbar-nav {
border-top: 3px solid black;
}
#chickenNav,
#beefNav {
border-bottom: 2px solid black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav id="header-nav" class="navbar">
<div class="container px-0">
<div class="navbar-header px-2">
<div class="navbar-brand">
<a href="index.html">
<h1>Food, LLC</h1>
</a>
</div>
</div>
<button class="navbar-toggler d-block d-sm-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">=</button>
<div class="collapse navbar-collapse" id="collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a id="chickenNav" class="nav-link" href="#">Chicken</a>
</li>
<li class="nav-item">
<a id="beefNav" class="nav-link" href="#">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sushi</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I'm looking to make a subnav under my navbar. I'm trying to get my text in my subnav to the right and my logo to the left of it. I can't seem to get my text to move to the right, however. I was also wondering how I get my logo to move down a little so I can get some space between the line and the logo; so it's not directly under the line. Thank you!
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Get a Quote</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<div class="container-fluid">
<a class="subnav=brand" href="#">
<img src="universallogo.jpg"
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
</div>
</subnav>
</ul>
</body>
</html>
You can give these styles a try. Essentially just flex the parent and use justify-content: space-between; to get elements to be on right and left sides. For your logo, you can just give it a class and add some margin to separate it from the bottom border on nav. I replaced your logo with a dummy image to demonstrate.
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: .5rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Get a Quote</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="https://dummyimage.com/200x100/000/fff" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#"></a>
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
</div>
</subnav>
</body>
</html>
I have a navigation menu using bootstrap, and the menu worked fine when I had the second sub-menu off to the side of the first sub-menu. I've changed it to put the third level sub-menu under the dropdown's link. Now when hovered over it the third level menu will not display.
I have tried different combinations of classes and adding ids but can't seem to get it to show up on hover. I'm not using JavaScript for this currently as it worked fine with html and css.
This is a small mockup of what is going on.
html {
padding: 0;
margin: 0;
min-height: 100%;
}
body {
padding: 0;
margin: 0;
min-height: 100vh;
overflow-x: hidden;
border-top: 7px solid black;
font-size: 62%;
font-family: "Open Sans";
}
* {
font-family: 'Open Sans';
}
.container {
padding-right: 0;
}
main {
padding-bottom: 22em;
}
p {
font-size:
}
.extra-bold {
font-weight: 800;
}
.semi-bold {
font-weight: 600;
}
.bold {
font-weight: bold;
}
.navbar {
background-image: linear-gradient(rgba(235,235,235,0), rgba(235,235,235,1));
height: 129px;
}
.navbar-brand {
margin-left: 1em;
margin-top: .5em;
}
.nav {
min-width: 100%;
flex-direction: row;
letter-spacing: 1px;
margin-left: 10em;
}
.navbar-nav {
flex-direction: row;
}
.nav li {
margin: 0em 1em;
}
.nav-link {
color: black;
}
.dropdown-menu a:hover {
color: white;
background-color: rgb(217,0,0);
}
.dropdown-item:hover {
color: white;
background-color: rgb(217,0,0);
}
.nav-item {
font-size: 1.6em;
}
.nav > li.disabled > a:hover {
text-decoration: underline;
color: rgb(217,0,0);
}
.nav-link:hover {
text-decoration: underline;
color: rgb(217,0,0);
}
.dropdown-hover {
color: white;
background-color: rgb(217,0,0);
}
.dropdown-item:hover {
background-color: rgb(217,0,0);
color: white;
}
.dropdown-menu.disabled:hover {
color: white;
background-color: rgb(217,0,0);
}
a.dropdown-item.dropdown.disabled:hover {
color: white;
background-color: rgb(217,0,0);
}
.dropdown-menu li:hover {
background-color: rgb(217,0,0);
color: white;
}
.dropdown ul li:hover > a {
background-color: rgb(217,0,0);
color: white;
}
.dropdown-menu .sub-menu {
position: relative;
top: 0;
display: none;
margin-top: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
list-style-type: none;
padding-left: 0;
}
#toggle:hover .sub-menu {
display: block;
}
.fa-caret-right {
float: right;
line-height: 1.5;
}
.fa-caret-right {
line-height: 1.75;
margin-left: .5em
}
.container {
margin-left: auto;
margin-right: auto;
}
ul.nav li.dropdown:hover div.dropdown-menu {
display: block;
}
* {
position: relative;
}
#navbarDropdown {
color: black;
}
.dropdown-item.disabled, .dropdown-item:disabled {
color: black;
}
.dropdown-item.disabled:hover, .dropdown-item:disabled:hover {
color: white;
background-color: rgb(217,0,0);
}
.nav-link.disabled:hover {
color: white;
background-color: rgb(217,0,0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no">
<link rel="canonical" href="http://hmi.blueseaonline.net/index.php" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.1/css/light.css" integrity="sha384-Rg8mXhpzJH99uBsgdsCp9zXjkcsw/pm+s4Kgu/56eRQSd8SAszYc6hssH5MLusHl" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.1/css/fontawesome.css" integrity="sha384-O68Og25nY+MZZRUiP6gm7XPDuHsNC5DgKWEoxn6+3CFcGLRXuFihbGO/8c5Ned0i" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="http://hmi.blueseaonline.net/index.php/site/style">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-right">
<div class="container">
<div class="row" style="min-width: 100%;">
<div class="col-xs-12">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav justify-content-center" style="list-style-type: none;">
<li class="nav-item dropdown">
Test <i class="fa fa-caret-down"></i>
<div class="dropdown-menu toggle-menu" aria-labelledby="navbarDropdown">
<ul style="padding:0; list-style-type: none;">
<li>
<a class="dropdown-item dropdown disabled" id="toggle" href="">Test <i class="fa fa-caret-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
</ul>
</li>
<li>
<a class="dropdown-item" href="#">Test</a>
</li>
<li>
<a class="dropdown-item dropdown" href="">Test <i class="fa fa-caret-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
</ul>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
Test
</li>
<li class="nav-item dropdown">
Test <i class="fa fa-caret-down"></i>
<span class="caret"></span><span class="sr-only">Dropdown Menu Toggle</span>
<div class="dropdown-menu toggle-menu" aria-labelledby="navbarDropdown">
<ul style="padding:0; list-style-type: none;">
<li>
<a class="dropdown-item" href=""Test</a>
</li>
<li>
<a class="dropdown-item dropdown" href="">Test <i class="fa fa-caret-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
</ul>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
Test
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="clearBoth"></div>
<!-- Load jQuery, then Popper, then Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Load Map Resizer -->
<!-- Load lightbox -->
</body>
</html>
This is what I'm trying to get: Dropdown Design
I am fairly new to html, css, js and bootstrap 4. I am trying to build a website just to practice my skills. I finally managed to change the colors, text, font-size etc of my bootstrap 4 navbar, however not when I scale down, the hamburger symbol disappears and I lose my options.
The only bit of code I removed was the bg-light to change the color, as well as create a custom class on my to change text color
a link to my code: https://codepen.io/jehc10/pen/LKqRRQ
.navbar-nav {
background:#4287f5;
}
.navbar-brand {
background:#4287f5;
}
.navbar-brand.custom{
color:#FFFFFF;
font-size:25px
/* border-right:2px solid black; */
}
.navbar {
background:#4287f5;
}
body {
font-family: 'Poppins', sans-serif;
/* font-weight:700; */
}
.navbar-nav li a {
color: #FFFFFF;
font-size:20px;
}
Instead of using an image hamburger, create hamburger using HTML and CSS.
.navbar, .navbar-nav {
background: #4287f5;
}
.navbar-brand.custom {
color: #FFFFFF;
font-size: 25px
}
.navbar-toggler {
padding: .25rem .5rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
}
.navbar-togglebar {
background: #FFFFFF;
display: block;
width: 25px;
height: 2px;
vertical-align: middle;
margin: 5px;
}
.navbar-nav li a {
color: #FFFFFF;
font-size: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand custom" href="#">Jesse</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-togglebar"></span>
<span class="navbar-togglebar"></span>
<span class="navbar-togglebar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
You can add the following styling to the navigation burger icon:
/*Initial burger state*/
button.navbar-toggler.navbar-dark.collapsed {
background: #000;
}
/*When toggled*/
.navbar-toggler:not(:disabled):not(.disabled) {
cursor: pointer;
background: #000;
}
I am trying to change the color of the dropdown menu in my navigation tabs when it is open (in this case blue and red), but it goes back to white when I let go of the mouse. How would I make it so when the dropdown menu appears white, it instead stays blue? My code is below if anybody can help.
What it looks like right now
My HTML
<ul class="nav nav-tabs nav-justified">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Projects</a>
<div class="dropdown-menu dropdown-menu-center">
<a class="dropdown-item" href="#algorithms-data">Algorithms and Data Structures</a>
<a class="dropdown-item" href="#programming-lab">Programming Lab</a>
<a class="dropdown-item" href="#computer-systems">Computer Systems Organization</a>
</div>
</li>
</ul>
My CSS:
.dropdown-menu {
background-color: var(--dark-gray);
border-top: 1px solid white;
border-right: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid white;
}
.dropdown-item:hover {
background-color: var(--gray);
}
.dropdown-toggle.active {
background-color: blue;
}
.dropdown-toggle:active, .open .dropdown-toggle {
background-color: blue !important;
color: red !important;
}
Use :focus
.dropdown-toggle:focus{...}
.dropdown-menu {
background-color: var(--dark-gray);
border-top: 1px solid white;
border-right: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid white;
}
.dropdown-item:hover {
background-color: var(--gray);
}
.dropdown-toggle.active {
background-color: blue;
}
.dropdown-toggle:active, .open .dropdown-toggle,.dropdown-toggle:focus {
background-color: blue !important;
color: red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Projects</a>
<div class="dropdown-menu dropdown-menu-center">
<a class="dropdown-item" href="#algorithms-data">Algorithms and Data Structures</a>
<a class="dropdown-item" href="#programming-lab">Programming Lab</a>
<a class="dropdown-item" href="#computer-systems">Computer Systems Organization</a>
</div>
</li>
</ul>