I have a bootstrap navbar and I have changed it so that the dropdown menu shows whenever one hovers over the menu items (instead of whenever one clicks). This works, but there is something off: The dropdown disappears very quickly and irregularly, it's not so easy to just hover and then click on something. I am not sure how to describe this but I think you will see what I mean, everything just seems a little bit too "quick".
Here is a jsfiddle:
https://jsfiddle.net/r3sjgq2c/
Edit: I am talking about the menu in the large viewport, not about the small viewport!
Here is the code:
<div class="header container-fluid">
<div class="row">
<div class="brand col-sm-10 offset-sm-1 hidden-xs-down">
<svg class="brand_logo"><use xlink:href="#brand_logo" /></svg>
</div>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Welcome<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pricing
</a>
<div class="dropdown-menu" aria-labelledby="dropdown_angebot">
<a class="dropdown-item" href="softwareentwicklung.php">Action</a>
<a class="dropdown-item" href="qualitaetssicherung.php">Another action</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com">
Our Company
</a>
<div class="dropdown-menu" >
<a class="dropdown-item" href="geschichte.php">History</a>
<a class="dropdown-item" href="karriere.php">Career</a>
<a class="dropdown-item" href="klienten.php">Clients</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="anfahrt.php">Get here<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="kontakt.php">Contact<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
CSS:
.navbar-toggler{
z-index: 999999 !important;
}
.header {
background-color: blue;
.navbar-toggler {
margin-top: 20px !important;
}
.navbar {
height: 50px !important;
padding: 0 !important;
background-color: yellow !important;
.navbar-nav {
display: table !important;
width: 100% !important;
list-style: none !important;
.nav-link {
padding: 0 !important;
}
li {
display: table-cell !important;
text-align: center !important;
a {
display: block !important;
text-align: center !important;
}
&:first-child a {
text-align: left !important;
}
&:last-child a {
text-align: right !important;
}
&:hover .dropdown-menu, .dropdown-item:hover .dropdown-menu {
display: block !important;
}
.dropdown-menu {
// margin-top: 10px;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
}
}
}
add this in your javascript file. also add
include this jquery to top off your all js file
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
$(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function() {
$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
});
});
Related
I am quite new to BOOTSTRAP and web development in general. So I was once again hoping someone could help me as I can't find the solution. I've started making a simple website to practice and it looks fine in my browser size; however, when I switch to mobile my created divs seem to be smaller or not keeping the specified size; this also appears to be in turn, breaking my nav bar while in mobile mode. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#logo-space {
background-color: #0f2471;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 110px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 2rem;
left: 20rem;
}
#nav-bar{
background-color: #16377e;
height: auto;
}
#nav-bar a{
color: white;
font-weight: bold;
font-size: 20px;
padding: 5px;
position: relative;
top: 5px;
}
.navbar-text{
text-align: right !important;
position: relative;
font-size: 20px;
bottom: 5px;
padding: 5px;
right: 5rem;
}
.nav-move{
position: relative;
left: 5rem;
}
.navbar {
height: 55px !important; /*i assume your navbar size 100px*/
}
</style>
</head>
<body>
<div class=".container-fluid">
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<nav id="nav-bar" class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-xs-0">
<li class="nav-item">
<a class="nav-link active nav-move" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
<a id="apply-link" class="nav-link" href="#">APPLY NOW</a>
</span>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
I am building an angular app in which I am using Bootstrap 5. I created a transparent navbar and I would like to see the background color change from transparent to dark when the page is scrolled. It doesn't work. It still keeps my navbar transparent instead of dark color each time the page is scrolled.
My navbar code:
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container-fluid">
WorkonPro
<button
type="button"
class="navbar-toggler"
data-bs-target="#navbarNav"
data-bs-toggle="collapse"
arial-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle Navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active item-space" href="#" aria-current="page"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#"> Healthcare </a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">Tech</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space grey-button"
style="color: #fff"
role="button"
>Login
</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space green-button"
style="color: #fff"
role="button"
><strong>Create account</strong>
</a>
</li>
</ul>
</div>
</div>
</nav>
The JS script I wrote with the aim to achieve this. (Please note that I wrote the same body of my html page)
<script src="../../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 100) {
nav.classList.add('bg-dark', 'shadow');
} else {
nav.classList.remove('bg-dark', 'shadow');
}
});
</script>
My style which has to do with the navbar is below:
.bg-dark {
background-color: #101011 !important;
}
.navbar-dark .navbar-brand {
padding: 20px 0 10px 10px;
color: #fff;
}
.navbar-nav .nav-link {
color: #101011;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 1);
}
.navbar-dark .navbar-brand {
margin: 0;
width: 50%;
float: left;
display: inherit;
}
.navbar-brand {
color: #101011;
padding: 20px 0 10px 10px;
}
body .navbar {
padding: 6px 0 !important;
}
body .navbar-brand {
background: none;
}
Please can someone tell me what I am doing wrong? What did I miss? And how I can fix it.
Thanks in advance.
Your code work fine for me.. Plz check the length of your body.. body height>100vh + 100px is required to run your js because of the condition given
this is exacty your code but it work for me well.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.bg-dark {
background-color: #101011 !important;
}
.navbar-dark .navbar-brand {
padding: 20px 0 10px 10px;
color: #fff;
}
.navbar-nav .nav-link {
color: #101011;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 1);
}
.navbar-dark .navbar-brand {
margin: 0;
width: 50%;
float: left;
display: inherit;
}
.navbar-brand {
color: #101011;
padding: 20px 0 10px 10px;
}
body .navbar {
padding: 6px 0 !important;
}
body .navbar-brand {
background: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body style=height:120vh class="bg-info">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container-fluid">
WorkonPro
<button
type="button"
class="navbar-toggler"
data-bs-target="#navbarNav"
data-bs-toggle="collapse"
arial-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle Navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active item-space" href="#" aria-current="page"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#"> Healthcare </a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">Tech</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space grey-button"
style="color: #fff"
role="button"
>Login
</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space green-button"
style="color: #fff"
role="button"
><strong>Create account</strong>
</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- <script src="js/jquery-3.6.0.min.js" charset="utf-8"></script> -->
<script>
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 100) {
nav.classList.add('bg-dark', 'shadow');
} else {
nav.classList.remove('bg-dark', 'shadow');
}
});
</script>
copy this and paste
Just give your navbar an id and type this code it works for me so far
// Changing nav color
const navbar = document.getElementById("navbar");
window.onscroll = (e) => {
if (window.scrollY > 100) {
navbar.classList.replace("navbartransparent", "navbarcolored");
} else {
navbar.classList.replace("navbarcolored", "navbartransparent");
}};
I have made a navbar in my html page and added the Bootstrap 4 class sticky-top to it.
The problem is that, it sticks to the top till half of the screen is scrolled, but then the sticky property doesn't work and the navbar goes upward as the page is scrolled.
Why is it happening that it works for limited margin and then suddenly stops working?
I tried to use navbar-fixed-top class,
also I tried position:sticky; top:0; width:100%, but in vain.
My Html for navbar:
<nav class="navbar navbar-expand-lg navigation navbar-fixed-top" style="position:sticky; top: 0; width:100%;" id="bootnavbar">
<div class="container">
<a class="navbar-brand" href="index.php"><i class="fas fa-home"></i></a>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="font-size:0.85em;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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">
About Us
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="about.php">About</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="boac.php">Board of Advisory Comittee</a></li>
<li><a class="dropdown-item" href="bos.php">Board of Studies</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="admission.php">Admission</a></li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Academic
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item disabled" href="faculty.php">Faculty</a></li>
<li><a class="dropdown-item" href="activities.php">Activities</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="facilities.php">Facilities</a></li>
</ul>
</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">
Courses
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="regular_courses.php">Regular Courses</a></li>
<li><a class="dropdown-item" href="short_term_courses.php">Short Term Courses</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.php" role="button" aria-haspopup="true" aria-expanded="false">
Gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="placements.php" role="button" aria-haspopup="true" aria-expanded="false">
Training & Placements
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="alumni.php" role="button" aria-haspopup="true" aria-expanded="false">
Alumni
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="feedback.php" role="button" aria-haspopup="true" aria-expanded="false">
Feedback
</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootnavbar.js"></script>
<script>
$(function() {
$('#bootnavbar').bootnavbar();
})
</script>
My CSS for navbar:
.navigation {
background: #020031;
padding: 0px 23px;
font-size: 17px;
z-index: 500;
box-shadow: 0px 10px 15px -9px;
}
.navbar-brand {
color: #fff;
}
.navbar-brand:hover {
color: #fff;
}
.navigation .nav-item .nav-link {
color: #fff;
margin-right: 10px;
padding: 16px;
text-transform: capitalize;
font-weight: 500;
}
.navigation li a:hover {
background: #f6783a;
}
.custom-toggler.navbar-toggler {
border-color: rgb(255, 255, 255);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-switch {
display: none;
}
.nav-section {
background: #020031;
}
.nav-section .nav-right {
float: right;
padding-top: 23px;
}
.nav-section .nav-right a {
color: #fff;
margin-left: 30px;
font-size: 16px;
}
.main-menu {
list-style: none;
}
.main-menu li {
display: inline;
}
.main-menu li a {
display: inline-block;
color: #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 500;
padding: 25px 20px;
margin-right: -5px;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.main-menu li a:hover {
background: #f6783a;
}
.main-menu li.active a {
background: #f6783a;
}
bootnavbar.css
.dropdown-menu {
margin-top: 0;
}
.dropdown-menu .dropdown-toggle::after {
vertical-align: middle;
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
.dropdown-menu .dropdown .dropdown-menu {
left: 100%;
top: 0%;
margin:0 20px;
border-width: 0;
}
.dropdown-menu > li a:hover,
.dropdown-menu > li.show {
background: #007bff;
color: white;
}
.dropdown-menu > li.show > a{
color: white;
}
#media (min-width: 768px) {
.dropdown-menu .dropdown .dropdown-menu {
margin:0;
border-width: 1px;
}
}
bootnavbar.js
(function($) {
var defaults={
sm : 540,
md : 720,
lg : 960,
xl : 1140,
navbar_expand: 'lg'
};
$.fn.bootnavbar = function() {
var screen_width = $(document).width();
if(screen_width >= defaults.lg){
$(this).find('.dropdown').hover(function() {
$(this).addClass('show');
$(this).find('.dropdown-menu').first().addClass('show').addClass('animated fadeIn').one('animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd', function () {
$(this).removeClass('animated fadeIn');
});
}, function() {
$(this).removeClass('show');
$(this).find('.dropdown-menu').first().removeClass('show');
});
}
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
};
})(jQuery);
I just see this question, its late but it might be helpfull for someone else.
Using two container-fluid or container causing that problem.
Example :
<div class="container-fluid">
etc...
</div>
Your navbar will work untill end of the container then stop working.
<main class="container-fluid" role="main">
etc...
</main>
So, your html codes should be like this :
<div class="container-fluid">
etc...
<main role="main">
etc...
</main>
</div>
Use only one container in your site, and all your codes in there.
Changing navbar-fixed-top in fixed-top may be the fix here.
<nav class="navbar navbar-expand-lg navigation fixed-top">
<div class="container">
....
</div>
</nav>
In most cases try to avoid margin-left and margin-right. Border-sizing will not include margin and therefore a design may breakdown. Use padding if possible. Margin-top and margin-bottom is normally no problem in responsive design.
Using Javascript for hover doesn't work when rezing the browser. Try using
/* submenu open on hover, add css animation if you like */
#media (min-width: 768px) {
nav.navigation ul > li:hover > .dropdown-menu {
display: block;
}
nav.navigation ul > li:not(:hover) > .dropdown-menu {
display: none;
}
}
Hell Yeah!!
I solved the problem with different approach.
Since, I had a header above the navbar in my website, I can't do position: fixed,
because this would bring the navbar on top of header when that page is visited and when top:0.
Solution :
I measured the height to which the sticky-top of Bootstrap worked and then just before that height (from top), I applied a media query which changed position: sticky to position: fixed and then navbar came at top when desired.
This was desirable as the header part is gone now.
I know this is just a quick fix, but it works perfectly :)
I currently have the following overlap problem with my dropdowns:
As you can see if I press my most right button (the filter logo) and then press my dropdown link it overlaps in an ugly way. I would like that the "Dropdown link" dropdown always goes on top.
I have tried playing with the CSS (z-index, position, display, etc.) of both dropdowns, but I can't seem to figure it out. From what I understand z-index should solve my problem, but it doesn't. So that's why I went to play with position / display etc, but that didn't help either and confused me even more.
Anyone have any idea what I am doing wrong? Would really appreciate a push in the right direction. (Other random feedback on my current code is also appreciated)
My code:
https://jsfiddle.net/afbs97dy/4/
HTML:
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="https://www.test.com"><img class="logoklant" src="images/test.png" alt="Logo"></a>
<a class="navbar-brand naamdashboard" href="#">test</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto menuitems" id="myNavbar">
<li class="nav-item"><a class="nav-link" href="#page1">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="#page2">Link 2</a></li>
<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="#test1">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="" id="filter">
<i class="fas fa-filter filterlogo"></i>
</a>
<ul class="dropdown-menu dropdownqlik">
<div id="CurrentSelections" class="qvobjects">
<div class="current-selections-placeholder">
<span>Connect to app to see Selection Toolbar</span>
</div>
</div>
</ul>
</li>
</ul>
</div>
</nav>
</body></html>
CSS:
/* navbar */
.navbar {
background-color: #3b3b3b;
font-family: Montserrat, sans-serif;
font-size: 12px !important;
letter-spacing: 4px;
}
.navbar-brand {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 5px;
}
.logoklant {
height:40px;
}
.naamdashboard {
font: 20px;
}
.filterlogo {
font-size: 32px;
margin-left: 5px;
margin-top: 2px;
padding-right: 10px;
}
.dropdownqlik {
height: 36px;
}
#filter.is-active + .dropdown-menu {
display: block;
width: 100.1%;
top:53px;
}
.is-pos-static {
position: static !important;
color: white !important;
}
#CurrentSelections {
margin-top: -8px;
margin-left:-1px;
}
/* Scroll to top */
.scrollToTop {
text-align: center;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
top: 95vh;
right: 1vw;
z-index: 3000;
}
.scrollToTopLogo {
color: black;
}
JS:
/* https://stackoverflow.com/questions/48243406/change-color-on-hover-and-when-navbar-toggle-is-collapsed */
$(document).ready(function(){
$("#filter").click(function(){
$(this).parent('li').toggleClass('is-pos-static');
$(this).toggleClass("is-active");
});
});
Thanks for taking your time to help.
add CSS
.dropdown-menu.show {
z-index: 9999;
}
I have a navbar with a button and nav brand,when I click the button the the items get displayed below in the sense it is collapsing verically but I need it to collapse horizontally. I have seen some question here,but still not able to achieve what I need.
here is the sketch of what i need
<nav class="navbar navbar-light" style="background-color: #2C3E50 ;">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button>
<h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
<div class="collapse width" id="navbarNav">
<ul class="navbar-nav">
<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="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
</div>
</nav>
//css
.navbar {
margin-top: 40px;
display: inline-block;
}
.navbar {
border-bottom-right-radius: 200px;
border-top-right-radius: 200px;
}
You can do this using this technique:
.navbar-nav { white-space: nowrap; }
.nav-item { display: inline-block; }
or by using flexbox:
.navbar-nav { display: flex; flex-flow: row nowrap; }
The first solution prevent lines from breaking and specify menu item to have inline behaviour. The second solution based on a using of flexbox layout.
UPDATED
Using bootstrap 4 you need some more modifications, add this:
.navbar-nav {
flex-flow: row nowrap;
}
.navbar {
flex-flow: row nowrap;
display: inline-flex;
}