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>
Related
I'm trying to replicate this dropdown list that is on this website (1st image). I've tried using a regular dropdown menu but it comes out very small and it is not centered on the page. How can I create multiple dropdowns in the center of the right side of my split screen? Any help will be greatly appreciated!
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: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<!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="#">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="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<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>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
</ul>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Select Your State
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">California</a></li>
<li><a class="dropdown-item" href="#">Illinois</a></li>
<li><a class="dropdown-item" href="#">Michigan</a></li>
<li><a class="dropdown-item" href="#">Ohio</a></li>
</ul>
</ul>
</div>
</div>
</body>
HTML has an <option> tag that is standardized selection inputs.
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: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
select {
width: 100%;
}
<!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="#">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="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<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>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<select id="state">
<option disabled selected>Select Your State</option>
<option value="california">California</option>
<option value="illinois">Illinois</option>
<option value="michigan">Michigan</option>
<option value="ohio">Ohio</option>
</select>
</div>
</body>
And to get the selected value, check the value property of the <select> element, e.g.: document.getElementById("state").value;
Stylize your <select> element to specify width, margin, padding, etc, e.g.: select { width: 100%; }
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
I have a HTML and CSS menu and I wanna show the special icon for each item when users hover on each item. I will show you my menu and codes...
.nav{
background-color: #4f9b30;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.nav a:hover {
background-color: #ff5c00;
color: black;
}
.home:hover{
background-image: url(https://ittest.ir/wp-content/uploads/2021/09/home-1.png);
background-repeat: no-repeat;
}
<body>
<div class="nav">
<a class="home" href="#">Home</a>
<a class="ran" href="#">why iran</a>
<a class="blog" href="#">blog</a>
<a class="services" href="#">About</a>
<a class="news"href="#">News</a>
<a class="event" href="#">event</a>
<a class="invest" href="#">invest</a>
<a class="contact" href="#">Contact</a>
</div>
</body>
this is my html and css codes
Because you are using a background image, you can adjust it's position using background-position. https://developer.mozilla.org/en-US/docs/Web/CSS/background-position.
You can adjust padding-left on .nav a to add space from the left edge and the nav text.
.nav{
background-color: #4f9b30;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 25px 14px 30px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.nav a:hover {
background-color: #ff5c00;
color: black;
}
.home:hover{
background-image: url(https://ittest.ir/wp-content/uploads/2021/09/home-1.png);
background-repeat: no-repeat;
background-position: 4% 44%;
}
<div class="nav">
<a class="home" href="#">Home</a>
<a class="ran" href="#">why iran</a>
<a class="blog" href="#">blog</a>
<a class="services" href="#">About</a>
<a class="news"href="#">News</a>
<a class="event" href="#">event</a>
<a class="invest" href="#">invest</a>
<a class="contact" href="#">Contact</a>
</div>
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!;}
I've seen some posts but, I can't figure it out on my specific lines of code. Can anyone help me add a | between 'About Us' and 'Login' I'm just trying to separate them using a '|'and I'm not exactly sure how to tweak my code to make that happen?
HTML
color:rgba(152,226,80,0.6); font-family: 'Bahnschrift Regular';" title="This Header is rendered by /app/_layout/site-header/site-header.component.html">
<div id="logo">
<a href="/index.html">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/" style="color:White;" >Home</a>
</li>
<li class="nav-item">
<div class="dropdown">
<li class="dropbtn">Services</li>
<div class="dropdown-content">
<a href="/carmaintenance" style="text-align:center">Car Maintenance
______________________
</a>
<a href="/gogreenseminars" style="text-align:center">Go Green Seminars
______________________
</a>
<a href="/microgridresources" style="text-align:center">Microgrid Resources
______________________
</a>
<a href="/gardeningtogether" style="text-align:center">Gardening Together
______________________
</a>
<a href="/volunteering" style="text-align:center">Volunteering and Activism
______________________
</a>
<a href="/recyclingefforts" style="text-align:center">Recycling Efforts
______________________
</a>
<a href="/inhousevegancafe" style="text-align:center;">In-House Vegan Cafe
</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard"style="color:White;">Membership Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
</ul>
</div>
</nav>
CSS
/* Position the navbar container inside the image */
/*.container {
position: absolute;
margin: 20px;
width: auto;
top:3%;
left:1%;
}
*/
/* The navbar */
.topnav {
overflow: hidden;
background-color: rgba(152,226,80,0.6);
}
/* Navbar links */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.nav-link
{
/*background-color:;*/
font-weight: bolder;
color: white;
font-size: 125%;
align-items:center;
text-align:center;
float: left;
display: block;
margin-left: 65px;
margin-right:5px;
}
.navbar {
float: left;
width:66%;
height:8%;
opacity:1;
border-radius:15px 0px 0px 15px;
padding-left: 0%;
top:3%;
left:1%;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Dropdown Button */
.dropbtn {
background-color: rgba(152,226,80,0.0);
color: white;
padding: 8px;
font-size: 125%;
border: none;
font-weight:bolder;
margin-left:65px;
margin-right:5px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 90px;
box-shadow: 0px 0px 0px 0px rgba(152,226,80,0.0);
z-index: 1;
text-align:center;
padding-left:20px;
padding-top:13px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color : rgba(152,226,80,0.6);
font-weight:bolder;
margin-top: -10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
/* Change color of dropdown links on hover */
//.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
//.dropdown:hover .dropbtn {background-color: #3e8e41;}
#font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight:bolder;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 1.woff') format('woff');
}
Any help would be nice and thank you in advance!
You can do this with either a border-left on the last li using :last-child a pseudo-element or a placed content using the :before pseduo-element. Note that by adding pseudo-elements - they are added as the first-child of the selected element. That may play a role in other styling issues.
EDIT - following my comment above - the only valid child of a ul is an li so you should amend your HTMLstructure to ensure that any divs / dropdowns etc are children of an li - not of the parent ul.
Thank you to #dale landry for the code skeleton used below :)
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
}
.nav-item:last-child {
border-left: solid 1px black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by using a :before pseudo element
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by simply adding aen element that is the same height as the entire li as a divider:
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
left: 0;
top:0;
bottom:0;
width: 1px
background-color: #d4d4d4;
}
And if you don't want to rely on the :last-child pseudo-selector - you can achieve the same by adding a class to the last item
<li class="nav-item login-link">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
//css
.login-link {
border-left: solid 1px #d4d4d4;
}
And if you want the divider between every li - but not to the right of the last one then you can use the direct sibling combinator "+"
.nav-item + .nav-item {
border-left: solid 1px #d4d4d4;
}
or by using a :before pseudo element
.nav-item {
position: relative
}
.nav-item + .nav-item:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
Why dont you add span in your li element of About us like following:
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
<span>|</span>
</li>
Simply wrap a bar in a list item tag in line with your nav at the spot you wish to have one. See my snipit. Now it is semantically valid code
.flex-box {
display: flex;
}
li,
.nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 4px;
color: black;
}
.bar {
font-weight: bold;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<li class="dropbtn">Services</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="bar">|</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
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