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
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 bootstrap 4 nav that that works fine except that I cannot figure out how to get the dropdown items into a horizontal subnav whose items centered on the page instead of flush left.
Here's my existing code:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<br>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
Here's what I would like the menu to look like when a top-level nav link is pressed.
I have been able to get close to this but am having particular difficulty in centering the items in the red subnav.
This what I have that is closer:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
</html>
Still can't figure out how to center text in subnav - again
Any help greatly appreciated.
This solution works but it can be a little tedious. I've wrapped the drop-down items in a div and gave them each their own unique class and a "center" class. Their unique classes set their width, and the center class centers them using auto margins. Here is the edited code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
/* NEW CSS STARTS HERE */
.center {
margin: 0 auto;
}
.about {
width: 261px;
}
.services {
width: 336px;
}
.partners {
width: 299px;
}
</style>
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<div class="center about">
Company
Team
Careers
</div>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<div class="center services">
Bring
Deliver
Package
Express
</div>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<div class="center partners">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
</html>
Not sure if you want it to span the entire width of the screen but if you want to just have them be organized in a row instead of a column you can add a bootstrap d-flex to not have it be in the default display:block
<div class="dropdown-menu d-flex">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
I have a multilevel menu that works well in desktop but there is no provision for small devices so the menu just flows all over the place. I have looked at many examples but cannot seem to move forward with coding this.
I am familiar with media queries but just need a starting point or some guidance so I can move forward with the rest of the site. If possible, I would like the submenu to open on hover.
Many thanks
html
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Add Box(es)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent Retrieval</li>
</ul>
</li>
<li>Files
<ul>
<li>Add File(s)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent File Retrieval</li>
</ul>
</li>
<li>Recycle Collection
<ul>
<li>Sacks</li>
<li>Boxes</li>
</ul>
</li>
<li>Box Supply</li>
<li>Sack Supply</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>
css
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #073648;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0 0 0 16px;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
}
.navigation ul li {
float: none;
position: relative;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
/*
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
*/
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
width: 250px;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
/* border-radius: 0 0 5px 5px;*/
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
/*
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
*/
}
The easiest way for a beginner to build responsive websites is to use a framework like Bootstrap.
The new version of this framework, Bootstrap 4, is amazing.
Here's a complete, responsive code example for a working navigation that includes a drop-down that could be turned into a multi-level drop-down:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.navbar-collapse .navbar-nav .dropdown .dropdown-menu{
margin-left: 0px !important;
margin-top: 0px !important;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
.dropdown:hover>.dropdown-menu{
display: block;
}
.dropdown-submenu:hover>.dropdown-menu{
display: block;
}
#media only screen and (max-width: 991px) {
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
}
.submenuNav{
opacity: 0.8;
margin-right: 3px;
}
.submenuNav:hover{
opacity: 1;
transform: translateX(3px);
transition: 0.4s all ease;
margin-right: 0px;
}
.dropdown-item{
background-color: none !important;
color: #007bff;
opacity: 0.8;
}
.dropdown-item:hover{
background-color: none !important;
color: #007bff;
opacity: 1;
transition: 0.2s all ease;
}
.customNav{
background-color: none !important;
color:#007bff !important;
}
.navbar .navbar-toggler .navbar-toggler-icon{
background-color: #007bff;
}
.dropdown-submenu a:active {
background-color: white;
}
</style>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Trekking In Nepal -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Trekking in Nepal
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Annapurna Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Annapurna Circuit</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Annapurna Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Upper Mustang</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Everest Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Jiri to Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Everest Three Pass</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Langtang Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Helambu</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Langtang Gosaikunda Lake</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Valley</a>
</li>
</ul>
</li>
</ul>
</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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
More info:
https://getbootstrap.com/docs/4.0/components/navbar/
I made a test page using Bootstrap 4 beta. The navbar has a drop down menu. It works fine in full screen on my laptop but when I view it on my iphone, the drop down shows 7 of the 9 drop down links. Is this a bug in Bootstrap or how can I fix it? here is my html, I left out some of the things that don't relate. Here is a
/* Navbar */
#primary-navbar {
background: #CDEBED;
margin-bottom: 0;
}
/* we overwrite the default navbar style from Bootstrap */
nav.navbar {
background: #CDEBED;
font-size:18px;
border: 0;
border-radius: 0;
margin-bottom: 0;
min-height: 34px;
white-space: nowrap;
}
/* The toggle unit (there is more stuff in there..) */
.navbar-header .navbar-toggle {
border: 0;
}
.navbar-header .navbar-toggle span.icon-bar {
background: #004289;
}
.navbar-header .navbar-toggle:hover span.icon-bar {
background: #004289;
}
/* The Logo/Start Button on mobile devices */
a.navbar-brand:link,
a.navbar-brand:visited {
color: #004289;
text-decoration: none;
background-color: #fff;
border-radius: 50%; padding: .5rem;
}
a.navbar-brand:hover,
a.navbar-brand:focus {
color: #ff0000;
text-decoration: none;
}
/* First Level Main nav */
ul.nav {
/* Menu style */
}
ul.nav li.active {
background: #004289;
text-decoration: none;
}
ul.nav li.active a:link,
ul.nav li.active a:visited {
color: #004289;
text-decoration: none;
}
ul.nav li a:link,
ul.nav li a:visited {
color: #004289;
text-decoration: none;
}
ul.nav li a:hover,
ul.nav li a:focus {
color: #fff;
}
/* Our resposive dropdown */
ul.dropdown-menu {
border-radius: 0;
background: #CDEBED;
width: 100%;
margin: 0;
}
ul.dropdown-menu li a:link,
ul.dropdown-menu li a:visited {
color: #004289;
padding: 5px 15px;
text-decoration: none;
}
ul.dropdown-menu li a:hover,
ul.dropdown-menu li a:focus {
color: #fff;
text-decoration: none;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #CDEBED;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
text-decoration: none;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
#media (min-width:769px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
/* Links */
a {
color: #036;
text-decoration: none;
}
a:hover,
a:focus {
color: #036;
text-decoration: none;
}
.navbar-right li { display: inline-block; }
a {
color: #036;
text-decoration: none;
&:hover {
color: #fff;
text-decoration: none;
}
}
#media (min-width: 992px) {
.equal{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
}
<!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">
<meta name="author" content="John Samonas">
<meta name="robots" content="index, follow">
<title>DriftwoodRentals.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="dist/css/custom-bs4.css" rel="stylesheet">
</head>
<body>
<nav class="navbar fixed-top navbar-custom justify-content-center navbar-expand-md">
The Driftwood
<button class="navbar-toggler drpbtn" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span style="color:#036">Menu</span> <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fa fa-home" aria-hidden="true"></i>
Home <span class="sr-only">(current)</span></a></li>
<li><a class="nav-link" href="photos.html">Photos</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Thing To Do</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="http://ryebeachinfo.com/" target="_blank">Rye Beach</a>
<a class="dropdown-item" href="https://www.nhstateparks.org/visit/state-parks/jenness-state-beach.aspx" target="_blank">Jenness State Beach</a>
<a class="dropdown-item" href="http://www.nhstateparks.com/wallis.html" target="_blank">Wallis Sands Beach</a>
<a class="dropdown-item" href="http://www.newcastlenh.org/pages/newcastlenh_common/great" target="_blank">Great Island Commons</a>
<a class="dropdown-item" href="http://www.nhstateparks.org/visit/state-parks/odiorne-point-state-park.aspx" target="_blank">Odiorn State Park</a>
<a class="dropdown-item" href="http://www.nhstateparks.org/visit/state-parks/rye-harbor-state-park.aspx" target="_blank">Rye Harbor State Park</a>
<a class="dropdown-item" href="http://www.seacoastsciencecenter.org/" target="_blank">Seacoast Science Center</a>
<a class="dropdown-item" href="http://www.granitestatewhalewatch.com/" target="_blank">Granite State Whale Watch</a>
<a class="dropdown-item" href="http://www.portsmouthharbor.com/" target="_blank">Portsmouth Harbor Cruises</a>
</div>
</li>
<li><a class="nav-link" href="rates.html">Rates & Booking</a></li>
<li><a class="nav-link" href="map.html">Map</a></li>
<li><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://www.facebook.com/DriftwoodRentals/" target="_blank">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:Info#DriftwoodRentals.com">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:1-603-501-0465">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</nav>
<header class="masthead">
<img src="images/Driftwood_Logo.jpg" class="mx-auto d-block img-fluid" alt="Driftwood logo">
</header>
<!-- /.container -->
<!-- Feature -->
<div class="container">
<h1 class="text-center">Welcome to Driftwood Rentals</h1>
<h2 class="text-center">Located on nationally recognized Rye Beach, just steps from Pirate's Coves/Wallis Sands beach and overlooks the majestic marsh.</h2>
<img src="images/Driftwood-aerial.jpg" class="mx-auto d-block img-fluid" alt="Driftwood aerial view">
<p>Welcome to The Driftwood Cottages and Apartments. We are new owners of this seaside vacation spot. Enjoy our charming studios, and one bedroom rustic cottages and two and three bedroom apartments. One minute walk to a pure sandy beach, moments to Portsmouth and all the shopping, whale watches, deep sea fishing, and world class surfing! Our sparkling pool is here for your enjoyment. </p>
<div class="embed-responsive embed-responsive-16by9 center-block">
<iframe width="1920" height="1080" src="https://www.youtube.com/embed/ibkRG1gVtZA?rel=0" allowfullscreen></iframe>
</div>
<p>Our guests can also enjoy our Pool. All cottages have kitchenettes, private bath, screened porch, Cable TV, refrigerator and more!</p>
<p>NO PETS/NO SMOKING ALLOWED!</p>
<p>We are open from May through October</p>
</div>
<div class="clearfix"></div>
<footer class="site-footer">
<p>Copyright © <script>document.write(new Date().getFullYear());</script> The Driftwood</p>
</footer>
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script>
var $buoop = {vs:{i:10,f:-4,o:-4,s:8,c:-4},unsecure:true,api:4};
function $buo_f(){
var e = document.createElement("script");
e.src = "//browser-update.org/update.min.js";
document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>
</body>
</html>
Your nav is fixed position and there's nothing constraining the height - this should work!
#media (max-width: 767px){
nav.navbar{
max-height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
I have a static HTML header that contains icons.
One icon uses Bootrap's navbar dropdown component.
My problem is, when I click on the user icon and select one of the dropdown menus, the user icon is also highlighted (replicates in the attached scriptlet when you click on "D" and move your cursor down a little).
How do I prevent the icon "D" from being highlighted after moving the cursor down a little?
<style> li.navbar-nav > a:hover,
li.navbar-nav > a:focus {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: #ffffff;
opacity: 1;
}
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
.navbar.navbar-ct-green {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-green .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-green .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-green .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
.table {
margin-bottom: 60px;
}
</style>
<link href="http://themes-pixeden.com/font-demos/7-stroke/Pe-icon-7-stroke.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-ct-green navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>
<a href="#">
<i class="pe-7s-timer"></i>A
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-note2" style="color: white;"></i>B
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-config" style="color: white;"></i>C
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="pe-7s-user"></i> <span class="caret"></span>D
</a>
<ul class="dropdown-menu" background="blue">
<li>
Logout
</li>
<li>
Profile
</li>
</ul>
</li>
</ul>
</div>
</nav>
You can apply an inline style as background:none (or transparent) on last a class="dropdown-toggle"...> which is parent of your D element:
<li class="dropdown">
<a href="#" class="dropdown-toggle" style="background:none !important;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
...
Edit:
another way is to define a css class like as noFocusBkg as following and apply it to containing li item as:
.noFocusBkg .dropdown-toggle:focus { /*** new class to prevent highlighting */
background: none; /* or transparent or inherit */
}
<li class="dropdown noFocusBkg">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
...
the full code snippet:
<style>
li.navbar-nav > a:hover,
li.navbar-nav > a:focus {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: #ffffff;
opacity: 1;
}
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
.navbar.navbar-ct-green {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-green .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-green .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-green .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
.table {
margin-bottom: 60px;
}
.noFocusBkg .dropdown-toggle:focus { /*** new class to prevent highlighting */
background: none; /* or transparent or inherit */
}
</style>
<link href="http://themes-pixeden.com/font-demos/7-stroke/Pe-icon-7-stroke.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-ct-green navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>
<a href="#">
<i class="pe-7s-timer"></i>A
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-note2" style="color: white;"></i>B
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-config" style="color: white;"></i>C
</a>
</li>
<li class="dropdown noFocusBkg">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="pe-7s-user"></i> <span class="caret"></span>D
</a>
<ul class="dropdown-menu" background="blue">
<li>
Logout
</li>
<li>
Profile
</li>
</ul>
</li>
</ul>
</div>
</nav>
The highlighting is occurring on the :focus event. So you can prevent this by overriding Bootstrap's default :focus event, like so:
.nav > li > a:focus {
background-color: transparent;
}