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;
}
}
Related
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
I'm trying to have a dropdown on a navbar item. It works, but the arrow is over the text of the menu item.
Codepen:
https://codepen.io/ogonzales/pen/QWjmorP
Code
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="height: 70px;">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/support/">Support and Consulting</a>
<a class="dropdown-item" href="/test-driven-development/">What is Test-Driven Development?</a>
<a class="dropdown-item" href="/testimonials/">Testimonials</a>
</div>
</li>
</ul>
<form class="form-inline ml-auto">
Log in
Sign up
</form>
</div>
</nav>
Bonus
I'd like also to put every navbar item more to the right. I know I can do this with CSS, but is there a Boostrap class am I missing?
You ul tag was not closed, I fixed that and answered your bonus question as well.
The reason it was on the over the text because, both the dropdown and the link were within same block, so you have to specify the width for those to fit-in inline, I have just provided 100px under .nav-link{...} and you are free to change that as per you requirement.
To move contents towards right you can have width property for the yellow block(check in my snipppet/fiddle) OR you can provide flex option for the block and use 'justify-content:space-between;`.
View in full screen due to media-query you have used.
.nav-link{
border:1px solid yellow;
margin:5px;
width:100px;
}
fiddle to playground.
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
body {
margin-bottom: 60px;
/* Margin bottom by footer height */
font-family: 'Poppins', sans-serif;
background: #fafafa;
padding-top: 70px;
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Set the fixed height of the footer here */
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}
/* NAVBAR TOP */
#top-navbar ul li.active>a a[aria-expanded="true"] {
color: #1f1f1f;
background: #12b556;
}
#top-navbar a:visited {
color: #fff;
}
#top-navbar a:link {
color: #fff;
}
#top-navbar a.subitem:link {
color: #1f1f1f;
}
/* ==== */
/* SIDEBAR */
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #1f1f1f;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #1f1f1f;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #12b556;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a.sidebar-link a[aria-expanded="true"] {
color: #fff;
background: #12b556;
}
a[data-toggle="collapse"] {
position: relative;
}
#navbarCollapse {
border: 1px solid red;
}
.nav-link {
border: 1px solid yellow;
margin: 5px;
width: 100px;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #12b556;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #12b556;
}
a.article,
a.article:hover {
background: #12b556 !important;
color: #fff !important;
}
a.sidebar-link:visited {
color: #fff;
}
a.sidebar-link:link {
color: #fff;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>{% block title %}DjangoX{% endblock title %}</title>
<meta name="description" content="A framework for launching new Django projects quickly.">
<meta name="author" content="">
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<link rel="stylesheet" href="{% static 'css/price.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</head>
<body>
<!--MENU SUPERIOR-->
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="height: 70px;">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/support/">Support and Consulting</a>
<a class="dropdown-item" href="/test-driven-development/">What is Test-Driven Development?</a>
<a class="dropdown-item" href="/testimonials/">Testimonials</a>
</div>
</li>
</ul>
<form class="form-inline ml-auto">
Log in
Sign up
</form>
</div>
</nav>
<!-- FIN MENU SUPERIOR-->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<img src="static\images\elim-logo.png" alt="Ministerios Elim" width="50%" height="50%">
<strong>ELIM</strong>
</div>
<ul class="list-unstyled components">
<li class="">
<a class="sidebar-link" href="#capitulo1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i> Capítulo 1
</a>
<ul class="collapse list-unstyled" id="capitulo1">
<li>
<a class="sidebar-link" href="#">Introducción</a>
</li>
<li>
<a class="sidebar-link" href="#">¿Qué es la salvación?</a>
</li>
<li>
<a class="sidebar-link" href="#">¿Se pierde la salvación?</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav>
<hr><br>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %} {% endblock content %}
</div>
<div class="col-md-4 float-right" id="LocalSide">
<form class="search-form" action="/search/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="KTlYgVaxnAYKzLle9WWDNIoE0MDSvAVldfbsnKbfpAStWafCb1MVMgwLdArZUEiP">
<div class="form-group">
<input type="search" class="form-control search-course" placeholder="Buscar curso" name="search_term" required="">
<input type="hidden" value="3" name="course_id">
</div>
</form>
<h2 class="local-side-heading">In this Section:</h2>
<nav class="local-nav">
<ol data-local-nav-list=""></ol>
</nav>
<a class="pcta" href="/payments/tdd-flask/" data-a-buy-course-cta="tdd-flask">
<span class="label label-success">
<span class="pcta-label">Get the</span>
<span class="pcta-hook">full course</span>
<span class="sr-only">for</span>
<span class="pcta-badge" aria-hidden="true">Now Only</span>
</span>
<span class="pcta-price">$30</span>
</a>
↑ Back to top
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Footer...</span>
</div>
</footer>
</div>
</div>
In your code ".dropdown-toggle::after" right value is the problem, change into this code it will work.
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: -7px;
transform: translateY(-50%);
}
Just remove the below manual css u have designed. bcz it is overriding bootstrap's default css which is not appropiate
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
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 navigation menu using bootstrap, and the menu worked fine when I had the second sub-menu off to the side of the first sub-menu. I've changed it to put the third level sub-menu under the dropdown's link. Now when hovered over it the third level menu will not display.
I have tried different combinations of classes and adding ids but can't seem to get it to show up on hover. I'm not using JavaScript for this currently as it worked fine with html and css.
This is a small mockup of what is going on.
html {
padding: 0;
margin: 0;
min-height: 100%;
}
body {
padding: 0;
margin: 0;
min-height: 100vh;
overflow-x: hidden;
border-top: 7px solid black;
font-size: 62%;
font-family: "Open Sans";
}
* {
font-family: 'Open Sans';
}
.container {
padding-right: 0;
}
main {
padding-bottom: 22em;
}
p {
font-size:
}
.extra-bold {
font-weight: 800;
}
.semi-bold {
font-weight: 600;
}
.bold {
font-weight: bold;
}
.navbar {
background-image: linear-gradient(rgba(235,235,235,0), rgba(235,235,235,1));
height: 129px;
}
.navbar-brand {
margin-left: 1em;
margin-top: .5em;
}
.nav {
min-width: 100%;
flex-direction: row;
letter-spacing: 1px;
margin-left: 10em;
}
.navbar-nav {
flex-direction: row;
}
.nav li {
margin: 0em 1em;
}
.nav-link {
color: black;
}
.dropdown-menu a:hover {
color: white;
background-color: rgb(217,0,0);
}
.dropdown-item:hover {
color: white;
background-color: rgb(217,0,0);
}
.nav-item {
font-size: 1.6em;
}
.nav > li.disabled > a:hover {
text-decoration: underline;
color: rgb(217,0,0);
}
.nav-link:hover {
text-decoration: underline;
color: rgb(217,0,0);
}
.dropdown-hover {
color: white;
background-color: rgb(217,0,0);
}
.dropdown-item:hover {
background-color: rgb(217,0,0);
color: white;
}
.dropdown-menu.disabled:hover {
color: white;
background-color: rgb(217,0,0);
}
a.dropdown-item.dropdown.disabled:hover {
color: white;
background-color: rgb(217,0,0);
}
.dropdown-menu li:hover {
background-color: rgb(217,0,0);
color: white;
}
.dropdown ul li:hover > a {
background-color: rgb(217,0,0);
color: white;
}
.dropdown-menu .sub-menu {
position: relative;
top: 0;
display: none;
margin-top: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
list-style-type: none;
padding-left: 0;
}
#toggle:hover .sub-menu {
display: block;
}
.fa-caret-right {
float: right;
line-height: 1.5;
}
.fa-caret-right {
line-height: 1.75;
margin-left: .5em
}
.container {
margin-left: auto;
margin-right: auto;
}
ul.nav li.dropdown:hover div.dropdown-menu {
display: block;
}
* {
position: relative;
}
#navbarDropdown {
color: black;
}
.dropdown-item.disabled, .dropdown-item:disabled {
color: black;
}
.dropdown-item.disabled:hover, .dropdown-item:disabled:hover {
color: white;
background-color: rgb(217,0,0);
}
.nav-link.disabled:hover {
color: white;
background-color: rgb(217,0,0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no">
<link rel="canonical" href="http://hmi.blueseaonline.net/index.php" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.1/css/light.css" integrity="sha384-Rg8mXhpzJH99uBsgdsCp9zXjkcsw/pm+s4Kgu/56eRQSd8SAszYc6hssH5MLusHl" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.1/css/fontawesome.css" integrity="sha384-O68Og25nY+MZZRUiP6gm7XPDuHsNC5DgKWEoxn6+3CFcGLRXuFihbGO/8c5Ned0i" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="http://hmi.blueseaonline.net/index.php/site/style">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-right">
<div class="container">
<div class="row" style="min-width: 100%;">
<div class="col-xs-12">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav justify-content-center" style="list-style-type: none;">
<li class="nav-item dropdown">
Test <i class="fa fa-caret-down"></i>
<div class="dropdown-menu toggle-menu" aria-labelledby="navbarDropdown">
<ul style="padding:0; list-style-type: none;">
<li>
<a class="dropdown-item dropdown disabled" id="toggle" href="">Test <i class="fa fa-caret-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
</ul>
</li>
<li>
<a class="dropdown-item" href="#">Test</a>
</li>
<li>
<a class="dropdown-item dropdown" href="">Test <i class="fa fa-caret-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
</ul>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
Test
</li>
<li class="nav-item dropdown">
Test <i class="fa fa-caret-down"></i>
<span class="caret"></span><span class="sr-only">Dropdown Menu Toggle</span>
<div class="dropdown-menu toggle-menu" aria-labelledby="navbarDropdown">
<ul style="padding:0; list-style-type: none;">
<li>
<a class="dropdown-item" href=""Test</a>
</li>
<li>
<a class="dropdown-item dropdown" href="">Test <i class="fa fa-caret-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
<li><a class="dropdown-item" href="">Test</a></li>
</ul>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
<li>
<a class="dropdown-item" href="">Test</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
Test
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="clearBoth"></div>
<!-- Load jQuery, then Popper, then Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Load Map Resizer -->
<!-- Load lightbox -->
</body>
</html>
This is what I'm trying to get: Dropdown Design
I 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;
}