$('#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
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");
}};
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 am creating a site using a Bootstrap 3 navbar and am trying to change the background colour from transparent to solid when the user scrolls to a certain point on the site.
I have written the following the code although had no luck in getting it to work. Thanks in advance.
HTML:
<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
<div class="container">
<div class="navbar-header">
<!-- Mobile Hamburger -->
<button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
</div>
<div class="navbar-collapse collapse">
<!-- Navigation Links -->
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>COURSES</li>
<li>PRICING</li>
<li>ACCOUNT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar { background-color:#101010; border:none; }
#logo { width:45px; height:auto; }
.navbar-right li a { color:#e5e5e5; font-family:headings; font-size:14px; }
ul.navbar-right li a:hover { color:#e5e5e5; text-decoration: none; background-color:transparent; }
ul.navbar-right li a:visited { color:#e5e5e5; text-decoration:none; }
#media only screen and (min-width:768px) {
.navbar { background-color: transparent; border:none; transition:0.8s; }
.nav-scrolled { background-color:#181818; transition:0.8s; }
.navbar-right li a { letter-spacing:3px; }
}
JS:
// Change nav on scroll
$(function() {
var header = $(".navbar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.addClass("nav-scrolled");
} else {
header.removeClass("nav-scrolled");
}
})
});
ALT:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="assets/js/jquery-3.2.1.min.js"></script>
Here's your exact code, minus the media query around the css, to show you that it works. I also added extra height to the nav so you can actually scroll.
If your code isn't working on your computer, you may not be referencing files properly.
// Change nav on scroll
$(function() {
var header = $(".navbar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.addClass("nav-scrolled");
} else {
header.removeClass("nav-scrolled");
}
})
});
.navbar { background-color:#101010; border:none; height: 200vh}
#logo { width:45px; height:auto; }
.navbar-right li a { color:#e5e5e5; font-family:headings; font-size:14px; }
ul.navbar-right li a:hover { color:#e5e5e5; text-decoration: none; background-color:transparent; }
ul.navbar-right li a:visited { color:#e5e5e5; text-decoration:none; }
.navbar { background-color: transparent; border:none; transition:0.8s; }
.nav-scrolled { background-color:#181818; transition:0.8s; }
.navbar-right li a { letter-spacing:3px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
<div class="container">
<div class="navbar-header">
<!-- Mobile Hamburger -->
<button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
</div>
<div class="navbar-collapse collapse">
<!-- Navigation Links -->
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>COURSES</li>
<li>PRICING</li>
<li>ACCOUNT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
Does anyone know how I can use an image as a nav bar,
I want to use my logo as a button so that when users click on the logo, a drop down menu appears that fills the entire page.
Currently I have a burger Tab and am implementing the drop down menu like so
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: darkgray;
color: #fff;
padding: 1% 0;
font-size: 1.2em;
border:0;
background-image: i
}
.navbar-brand {
float: right;
min-height: 55px;
padding: 0 15px 5px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active
a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: darkgray;
}
.navbar-inverse .navbar-nav li a {
Color:#D5D5D5;
}
Since you said you're fine with using JavaScript.
Add the following code to your HTML document:
<!DOCTYPE html>
...
<script type="text/javascript" src="thePathToYourJSfile.js"></script>
</body>
</html>
With CSS, style your menu however you wish to, but also add:
display: none;
And your JavaScript could look something like the following:
var logo = document.getElementById('id-of-your-logo')
var menu = document.getElementById('id-of-your-menu')
// this attaches a listener for the click event to your logo element
logo.onclick = function() {
// when your logo is clicked, the code in this function will execute
// the code below checks whether or not the menu is already displaying, and then displays the menu or hides it accordingly
menu.style.display = window.getComputedStyle(menu).display !== "none" ? "none" : "block"
}
Your html had some small errors. It should have been like this
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
If you encounter any trouble just tell us
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;
}
}