Hi I am developing Nav bar using Html and CSS. In right side I want to have icon in drop-down list as shown below.
I am trying as below to get it done.
<div className="dropdown">
<button className="dropbtn">John Doe</button>
<div className="dropdown-content">
Settings & Configurations
Logout
<div>
</div>
Below are my css styles.
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-light .navbar-brand {
color: rgba(0, 0, 0, .9);
}
I am trying to add one notification bar and drop-down with icon which shows user icon. Can someone help me in this regard. Any help would be appreciated. Thanks
If you want to have an icon in the dropdown list you could try this example:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Link for Font awesome icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Links for Bootstrap-->
<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>
<div class="container">
<div class="dropdown mt-5">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> <i class="fa fa-home"></i> Home </a>
<a class="dropdown-item" href="#"> <i class="fa fa-address-book"></i> Contact </a>
<a class="dropdown-item" href="#"> <i class="fa fa-bell"></i> Notifications </a>
<a class="dropdown-item" href="#"><i class="fa fa-cog"></i> Setting </a>
</div>
</div>
</div>
</body>
</html>
Just change the icon to your likings
Hello sir If you don't want to use bootstrap you could do the following. Imagine this is your dropdown list:
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a class="dropdown-item" href="#"> Home </a>
<a class="dropdown-item" href="#">Contact </a>
<a class="dropdown-item" href="#"> Notifications </a>
<a class="dropdown-item" href="#"> Setting </a>
</div>
</div>
and the css
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 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;}
/* This align the icon to the right */
#icon{
align-items: right;
}
I copied this example from W3 schools so if you have your own drop down list you can also use that. Then to add the icons change the dropdown list as follows:
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a class="dropdown-item" href="#"> <i class="fa fa-home"></i> Home </a>
<a class="dropdown-item" href="#"> <i class="fa fa-address-book"></i> Contact </a>
<a class="dropdown-item" href="#"> Notifications <i class="fa fa-bell"></i></a>
<a class="dropdown-item" href="#"> Setting <i class="fas fa-bars"></i></a>
</div>
depending on where you want your icons you could put them before the text (just as the first 2 items in the dropdown-list) aligning them to the left & you could place them after the text (just as the last 2 items in the dropdown-list) aligning them to the right.
But to make all this possible you need to put this link under the title attribute in the head element:
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
There you go now your dropdown-list items will have icons with the text.To get more icons go to the following link:
https://www.w3schools.com/icons/icons_reference.asp
Related
A dropdown div element which is supposed to work like this in mobile view is appearing like this mobile view In inspect Element.
I tried to change CSS z-index stylings of almost all related nav elements and left this one at "z-index:121212 !important;" and still the dropdown div is appearing behind all the other nav links.
Does anyone know why this is happening? Any help would be greatly appreciated.
Here is my HTML code and it's CSS:
.navbar-mobile .dropdown>.dropdown-active {
display: block;
z-index: 121212;
}
.dropdown-content {
display: none;
position: absolute;
background-color: var(--bg-dark);
min-width: 200px;
box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.2);
z-index: 101000;
animation: marketNav 0.5s;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover{
background-color: var(--main-color);
color: #000 !important;
}
.dropdown-content a:hover{
color: #1F586B;
}
.dropdown:hover .dropdown-content{
display: inline-block;
}
.nav-pills.has-two .nav-item .nav-link.active {
background-color: var(--main-color);
color: #000;
}
.nav-link{
font-weight: 600 !important;
letter-spacing: 0.8px;
}
#media screen and (min-width: 1024px) {
.support-link{
margin-right: 10px!important;
}
.nav-link{
padding-left: 25px!important;
}
}
.nav-pills.has-two .nav-item .nav-link {
background-color: #000 !important;
color: #fff;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
padding: 12px 20px;
}
<!-- Navigation -->
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center justify-content-lg-between">
<div class="logo me-auto me-lg-0">
<a href="index.htm">
<span>
<img class="img-fluid rounded sm-device-img text-align" src="asset/theme1/images/logo/logo.svg" width="100%" alt="pp">
</span>
</a>
</div>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li class="active">
<a class="nav-link" href="index.htm">Home</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropbtn nav-link">Market</a>
<div class="dropdown-content">
Forex
Cryptocurrencies
Indices
Stocks
Commodities
</div>
</div>
<div class="mobile-view marketNav">
Forex
Cryptocurrencies
Indices
Stocks
Commodities
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropbtn nav-link">Trading</a>
<div class="dropdown-content">
Trading Platforms
Tools
Education
benefits
</div>
</div>
<div class="mobile-view marketNav">
<a class="sub-nav-link" href="">Trading Platforms</a>
<a class="sub-nav-link" href="">Tools</a>
<a class="sub-nav-link" href="">Education</a>
<a class="sub-nav-link" href="">benefits</a>
</div>
</li>
<li>
<a class="nav-link" href="">Account Types</a>
</li>
<li>
<a class="nav-link" href="">About</a>
</li>
<li>
<a class="nav-link" href="">Contact</a>
</li>
<li class="d-md-block d-lg-none d-block ">
<a class="nav-link" href="">Login</a>
<a class="btn-border-inverse col-12 btn-sm me-3" href="">Register</a>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
<div class="header-right d-flex d-none d-md-none d-lg-block">
Login
Register
</div>
</div>
</header>
<!-- Navigation Ends -->
Edit: I found a way to solve this issue. The links weren't able to be clicked when they are behind the main "nav-links". So I added blank divs with heights to appear below the nav-link where the dropdown-content would appear with the help of some JS and CSS to make it hidden in larger screens. Now I am able to click the links in the "dropdown-content".
The problem is not with the z-index, but with the background-color. It is transparent, so it seems like it's behind the other text. You should set the variables you use in your code:
:root {
--bg-dark: #000;
--main-color: #fff;
}
i am trying to get a drop down list in navbar using my _layout.cshtml file of asp.net mvc project but for some reason the drop down list is not working. heres the code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - JwtAuthorisationProj</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"
rel="stylesheet" type='text/css'>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<style>
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #f9f7f5;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: palegreen;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">JwtAuthorisationProj</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<div class="dropdown">
<button class="dropbtn">
Click
<i style="height: 18px; width: 18px;" class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - JwtAuthorisationProj - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
on hover i should get div with link1, link2, link3. but its not working here but when i copy this code in normal html file and then open it i am getting the drop down properly. can anyone help?
on hover i should get div with link1, link2, link3. but its not working here but when i copy this code in normal html file and then open it i am getting the drop down properly. can anyone help?
That is because you use bootstrap.css in your _Layout.cshtml, and it contains some same class name with what you defined here. They conflict with each other.
You need remove overflow: hidden; in both .navbar and .dropdown class like below to make your css work:
.navbar {
/*overflow: hidden;*/
background-color: #f9f7f5;
font-family: Arial;
}
.dropdown {
float: left;
/*overflow: hidden;*/
}
Result:
Or you can use the default bootstrap css instead of custom css, you can follow the reference below:
https://stackoverflow.com/a/69400191/11398810
I am facing the CSS problem in the dropdown menu selection box. My position in the dropdown box view position is not good. My client is not satisfied look like this view dropdown box. Hope someone can guide me how to solve it. Thanks.
Below is my coding:
<style>
.dropdown-content {
display: none;
position: absolute;
min-width: 70px;
z-index: 9;
}
.dropdown-content a {
display: block;
background: #f1f1f1;
text-decoration: none;
color: black;
}
.dropdown {
display: inline-block; /* Change display from block to inline-block */
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover #dropbtn {
background-color: #3e8e41;
}
</style>
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="dropdown">
<a id="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-wrench"></i>
</a>
<div class="dropdown-content">
Tetapan Umum
Pengurusan Pengguna
</div>
</div>
<!-- Edit 1: Move logout button out of dropdown menu -->
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>
My output show me like the below picture:
I expected the result is like below the picture:
i've added some padding to the anchor's inside the dropdown-content div and on the div itself i've added width: fit-content to make sure it will not cutoff the text inside.
<style>
.dropdown-content {
display: block;
position: absolute;
min-width: 70px;
z-index: 9;
width: fit-content;
}
.dropdown-content a {
display: block;
background: #f1f1f1;
text-decoration: none;
color: black;
padding-left: 5px;
padding-right: 5px;
}
.dropdown {
display: inline-block; /* Change display from block to inline-block */
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover #dropbtn {
background-color: #3e8e41;
}
</style>
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="dropdown">
<a id="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-wrench"></i>
</a>
<div class="dropdown-content">
Tetapan Umum
Pengurusan Pengguna
</div>
</div>
<!-- Edit 1: Move logout button out of dropdown menu -->
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>
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 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;
}
}