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 :)
Related
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");
}};
$('#navbar-collapse').on('show.bs.collapse', function () {
$("html").click(function() {
//OPTION 1
document.getElementById("navbar-collapse").classList.remove('show');
//OPTION 2
//$('#navbar-collapse').hide();
//OPTION JAIME
//$('#navbar-collapse').collapse('toggle');
});
$('#navbar-collapse').click(function (e) {
e.stopPropagation();
});
});
.bg-ecs-white{
background: #fff !important;
}
.navbar-ecs .navbar-brand {
color: #34219e;
}
.navbar-ecs .navbar-brand:hover, .navbar-ecs .navbar-brand:focus {
color: #ff2069;
}
.navbar-ecs .navbar-nav .nav-link {
color: #34219e;
}
.navbar-ecs .navbar-nav .nav-link:hover, .navbar-ecs .navbar-nav .nav-link:focus {
color: #ff2069;
}
.navbar-ecs .navbar-nav .show > .nav-link,
.navbar-ecs .navbar-nav .active > .nav-link,
.navbar-ecs .navbar-nav .nav-link.show,
.navbar-ecs .navbar-nav .nav-link.active {
color: #00e1e1;
}
.navbar-ecs .navbar-toggler {
color: #ff2069;
border-color: #34219e;
}
.navbar-ecs .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 32, 105, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/***************NAV-SUBLINK**************/
#media (min-width: 992px){
.navbar-expand-lg .navbar-nav .nav-sublink {
padding-right: .5rem;
padding-left: .5rem;
}
}
.navbar-ecs .navbar-nav .nav-sublink {
color: #ff2069;
}
.navbar-ecs .navbar-nav .nav-sublink:hover, .navbar-ecs .navbar-nav .nav-sublink:focus {
color: #ff2069;
text-decoration: none;
}
.nav-sublink, .navbar {
padding: .5rem 1rem;
}
.dropdown-menu {
background-image: linear-gradient(#fff, #c6ffff); /*to right,*/
border: none;
}
.dropdown-toggle::after,
.dropup .dropdown-toggle::after {
content: none;
}
/*botones submenú navbar*/
.btn-link {
color: #34219e;
}
.btn-link:hover {
color: #ff2069;
text-decoration: none;
}
#intro {
height: 100%;
background-color: blue;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-ecs-white navbar-ecs fixed-top scrolling-navbar">
<div class="container-fluid">
<div class="logo">
<a class="navbar-brand" href="#">LOGO</a>
</div>
<button id="btnTog" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sec 1</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div id="intro">
<br> <br><br> <br><br> <br>
<p class="text-white text-center">
CONDITION
the menu can only be opened with the button, to close, when the user touches outside the menu</p>
<p class="text-white text-center">1.open menu 2.touch background blue 3.open menu 4. :(</p>
<br>
</div>
</div>
</body>
</html>
I am trying to hide the navbar menu when a user clicks outside of a specific div. The function of identifying the click outside the div responds well, but the navbar does not respond again as it would like.
What I am trying to do, is that when the user presses outside the div, he makes the call to the same function that hides / shows the navbar menu. And I would like to know:
What function invokes the "navbar-toogle" button in bootstrap4?
I am trying all these options, but I can not find the key, each of them gives a different error.
Jquery / JavaScript
$('#navbar-collapse').on('show.bs.collapse', function () {
$("html").click(function() {
//OPTION 1
//document.getElementById("navbar-collapse").classList.remove('show'); // The "navbar-toogle" button does not respond
//OPTION 2
// $('#navbar-collapse').hide(); // Problem, the style = display: none remains active (there is no way to remove it)
//$('#navbar-collapse').css('display','none'); //I also try to assign the manual value of none first, and once it is hidden, it performs the following function (IT DOES NOT WORK)
//$('#navbar-collapse').removeAttr('style'); //If I add this line, style is completely removed, and the hide () function does not respond
//OPTION JAIME
$('#navbar-collapse').collapse('toggle'); //The menu opens always touch where the user touches. OPTION NOT VALID
// OPTION 3
//document.getElementById("btnTog").classList.add('collapsed'); //Behavior OK
//$("btnTog").attr("aria-expanded","false"); // DO NOT CHANGE THE VALUE, it always stays "true"
//document.getElementById("navbar-collapse").classList.remove('show'); // OK Behavior - Problem: If I press the Hide / Show Menu button (btnTog) It does not hide
// OPTION 4, 5, 6, ... TESTING OTHER VARIANTS without success
//$("navbar-collapse").toggle();
//$("#navbar-collapse").css("display","");
//$("#navbar-collapse").css('display','');
//$('#navbar-collapse').get(0).style.display='';
//$('#navbar-collapse').css('display',null);
//getElementById("navbar-collapse").removeAttribute("style");
//getElementById("navbar-collapse").removeAttribute("display");
//getElementById("navbar-collapse").removeAttribute("none");
//document.getElementById("#navbar-collapse").style.display = null;
//document.getElementById("navbar-collapse").classList.remove('display');
//document.getElementById("navbar-collapse").classList.add('collapsing');
});
$('#navbar-collapse').click(function (e) {
e.stopPropagation();
});
PHP / HTML
<nav class="navbar navbar-expand-lg bg-ecs-white navbar-ecs fixed-top scrolling-navbar">
<div class="container-fluid">
<div class="logo">
<a class="navbar-brand" href="#">LOGO</a>
</div>
<button id="btnTog" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sec 1</a>
</li>
</ul>
</div>
</div>
</nav>
Holy crap, I had the biggest brain fart. I don't know why I was thinking dropdown when it was clearly collapse.
https://getbootstrap.com/docs/4.3/components/collapse/#methods
$('#navbar-collapse').collapse('hide');
This is probably what you need.
I also have a codepen that I created:
https://codepen.io/jamierytlewski/pen/YgJzEj
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 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");
});
});
I've navbar with 9 elements inside, when viewport width is less than 768px everything is ok, but when viewport is larger than 768px it looks like this:
Image that show navbar http://imageshack.com/a/img537/967/vOZFCK.jpg
My goal is to make navbar-nav scrollable horizontally, and the sixth, the seventh and eighth element must appear in line with the other and and everything must be scrollable.
The effect is similar to that visible here, so I tried to implement Smooth Touch Scroll Jquery plugin, adding <div id="TouchScroller"></div> before navbar-nav div,but nothing happens.
Please help me!
Here Navbar Html code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-lezard">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a class="page-scroll" href="#page-top">
<h1>Lezard <span class="orange">Climb</span></h1>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-lezard">
<div id="TouchScroller">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about"><span class="yellow">Chi siamo</span></a>
</li>
<li>
<a class="page-scroll" href="#dove"><span class="blu">Dove siamo</span></a>
</li>
<li>
<a class="page-scroll" href="#contatti"><span class="green">Contattaci</span></a>
</li>
<li>
<a class="page-scroll" href="#attivita"><span class="orange">Attività</span></a>
</li>
<li>
<a class="page-scroll" href="#orari"><span class="violet">Orari</span></a>
</li>
<li>
<a class="page-scroll" href="#corsi"><span class="light-blu">Corsi di arrampicata</span></a>
</li>
<li>
<a class="page-scroll" href="#abbonamenti"><span class="red">Abbonamenti</span></a>
</li>
<li>
<a class="page-scroll" href="#staff"><span class="brown">Staff Lezard</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
</nav>
CSS
.navbar{
border-bottom: none !important;
font-family: 'Amatic SC', cursive,helvetica,sans-serif;
background-color: #000;
padding: 0.5em;
font-size: 2em;
}
#media screen and (min-width: 480px ) {
.form-panel-width{
width: 100%;
}
}
.navbar-brand{
margin-top: -1.6em;
margin-left: -0.7em;
}
.navbar-toggle{
margin-top: 0.4em;
margin-right: 0;
background-color: #ff9900;
border-color: transparent !important;
}
.navbar-toggle:active{
background-color: #ff9900;
border-color: transparent;
}
.icon-bar {
background-color: #000 !important;
}
.navbar-nav > li{
text-align: center;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
/*Fix Navbar element when height is too low */
#media screen and (max-height: 380px) and (max-width: 767px){
.navbar-nav > li{
margin-bottom: -0.4em;
}
}
#media screen and (min-width: 768px) and (min-height: 1024px){
.navbar-nav{
margin-top: 1.5em;
}
.navbar-brand{
margin-left: 0;
}
.navbar-brand h1{
font-size: 3em;
}
.navbar-nav a{
font-size: 1.3em;
}
}