Bootstrap DEFAULT-navbar jump to a few pixels under #point of my sections, anyway AFFIX-navbar works great.
You can check it here: http://kresyproduction.cz/
The problem is when i click on any link in default navbar it doesnt scroll in right way. Just like u can see on my page. Few pixels under the section and it hides some content. But when you scroll a little bit and the default navbar change to affix links work perfect.
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>Kresy Production</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav class="navbar navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="50">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#domu"><img src="img/kp_white.png" alt="logo" title="Kresy Production" style="width auto;height: 30px;"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Domů</li>
<li>Služby</li>
<li>Showreel</li>
<li>O nás</li>
<li>Kontakt</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
.
.
</body>
Your navbar has data-offset-top value. That is causing the issue. Change this
<nav class="navbar navbar-default nav-fixed-top" data-spy="affix" data-offset-top="50">
to this -
<nav class="navbar navbar-default nav-fixed-top" data-spy="affix" >
Hope this helps...
EDIT: 1 without removing data-offset-top value, edit it to this
<nav class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="xx"> -- xx could be the data offset that works for you.
Related
Pardon me if I am missing something obvious. I am using WebStorm to write a website and wanted to experiment with Bootstrap. Now the problem is that I'm pretty sure the Bootstrap's JavaScript isn't working. For example, I can't toggle a div with a "collapse" class, the Navbar "active" class isn't working as well. Here is my code. UPDATE: updated code, I should also add my javascript is working, but the bootstrap javascript isn't
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shachar's Website</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My StyleSheet -->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<a class="navbar-brand text-info " href="#">Logo</a>
<button class="navbar-toggler bg-info menu-icon-container" type="button" data-toggle="collapse" data-target="#navbar-info" onclick="animateMenu(this)">
<div class="menu-icon1"></div>
<div class="menu-icon2"></div>
<div class="menu-icon3"></div>
</button>
<div class="collapse navbar-collapse" id="navbar-info">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
Test1
<div class="collapse" id="bonus">
Test2
</div>
<div id="homepage-body" class=""></div>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+ mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- My JavaScript -->
<script type="text/javascript" src="./myscript.js"></script>
</body>
<script> needs to be placed before </body> and add integrity and crossorigin. In general, like this:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+ mo//f6V8Qbsw3" crossorigin="anonymous"></script>
Here is the documentation.
I am trying to trigger some JavaScript to execute whenever the Bootstrap navbar is either expanded or collapsed.
I have been stuck on this problem for a few days now, and none of the solutions I have found online appear to work in a reliable way.
<!-- Font awesome -->
<link href="https://markups.io/demo/osteriax/assets/css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://markups.io/demo/osteriax/assets/css/bootstrap.css" rel="stylesheet">
<!-- Slick slider -->
<link rel="stylesheet" type="text/css" href="https://markups.io/demo/osteriax/assets/css/slick.css">
<!-- Date Picker -->
<link rel="stylesheet" type="text/css" href="https://markups.io/demo/osteriax/assets/css/bootstrap-datepicker.css">
<!-- Gallery Lightbox -->
<link href="https://markups.io/demo/osteriax/assets/css/magnific-popup.css" rel="stylesheet">
<!-- Theme color -->
<link id="switcher" href="https://markups.io/demo/osteriax/assets/css/theme-color/default-theme.css" rel="stylesheet">
<!-- Main style sheet -->
<link href="https://markups.io/demo/osteriax/style.css" rel="stylesheet">
<!-- Start header section -->
<header id="mu-header">
<nav class="navbar navbar-default mu-main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button id="navDrop" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- Text based logo -->
<a class="navbar-brand" href="index.html">Osteria<span>X</span></a>
<!-- Image based logo -->
<!-- <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" alt="Logo img"></a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">
<li>HOME</li>
<li>ABOUT US</li>
<li>MENU</li>
<li>RESERVATION</li>
<li>GALLERY</li>
<li>OUR CHEFS</li>
<li>CONTACT</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</header>
<!-- End header section -->
<!-- jQuery library -->
<script src="https://markups.io/demo/osteriax/assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://markups.io/demo/osteriax/assets/js/bootstrap.js"></script>
<!-- Slick slider -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/slick.js"></script>
<!-- Counter -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/simple-animated-counter.js"></script>
<!-- Gallery Lightbox -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/jquery.magnific-popup.min.js"></script>
<!-- Date Picker -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/bootstrap-datepicker.js"></script>
<!-- Ajax contact form -->
<script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/app.js"></script>
<!-- Custom js -->
<script src="https://markups.io/demo/osteriax/assets/js/custom.js"></script>
And then the JavaScript:
<script>
/* JS: */
$(document).ready(function(){
$("#navDrop").on("hide.bs.dropdown", function(){
alert(3);
});
$("#navDrop").on("show.bs.dropdown", function(){
alert(4);
});
});
</script>
The above code does not appear to be working.. Thank you in advance for any advice, it is greatly appreciated :)
You're looking for the collapse event, not dropdown. Also, make sure you target the navbar, not the toggle button.
<script>
$(document).ready(function(){
$(".navbar").on("hide.bs.collapse", function(){
alert(3);
});
$(".navbar").on("show.bs.collapse", function(){
alert(4);
});
});
</script>
I'm trying to hide/show a Bootstrap navbar when scrolling down/up but it does not seem to work. I'm stuck and I would really appreciate some help here. Could anyone tell me what I am doing wrong? Please bear in mind I'm learning how to use Bootstrap and got very little knowledge about jQuery.
When I check the code with the browser console it does not show any error.
I have also tried fadeIn and fadeOut as well as addClass and removeClass functions with no luck.
$(document).ready(function() {
var banner = $("#navscroll");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= banner.height()) {
$("#banner").hide();
} else {
$("banner").show();
}
});
});
console.log();
body {
background-color: azure;
}
.divi {
width: 500px;
height: 500px;
}
#divi1 {
background-color: red;
}
#divi2 {
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Stylesheet for Mysite -->
<title>My Site</title>
</head>
<body>
<!-- Banner -->
<div id="banner" class="container-fluid">
<nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">What I do</a>
<a class="nav-item nav-link" href="#">Find Me</a>
</div>
</div>
</nav>
</div>
<!-- Banner -->
<!-- Divs -->
<div class="container-fluid">
<div id="divi1" class="divi"></div>
<div id="divi2" class="divi"></div>
</div>
<!-- Divs -->
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
There are two issues preventing your code from showing the navbar back when scrolling up:
The line $("banner").show(); => there is "#" missing before banner.
When hiding an element, its height isn't kept. Therefore, when testing the nvarbar height after it's already hidden, you get an unexpected result. Therefore, I recommend to save the height in advance and compare it to the saved variable.
The fixed code is:
$(document).ready(function() {
var banner_height = $("#navscroll").height();
var lastScrollTop = 0;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var currScrollTop = $(this).scrollTop();
if (scroll >= banner_height && currScrollTop > lastScrollTop) {
$("#banner").hide();
} else {
$("#banner").show();
}
lastScrollTop = currScrollTop;
});
});
body {
background-color: azure;
}
.divi {
width: 500px;
height: 500px;
}
#divi1 {
background-color: red;
}
#divi2 {
background-color: greenyellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Stylesheet for Mysite -->
<title>My Site</title>
</head>
<body>
<!-- Banner -->
<div id="banner" class="container-fluid">
<nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">What I do</a>
<a class="nav-item nav-link" href="#">Find Me</a>
</div>
</div>
</nav>
</div>
<!-- Banner -->
<!-- Divs -->
<div class="container-fluid">
<div id="divi1" class="divi"></div>
<div id="divi2" class="divi"></div>
</div>
<!-- Divs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Try to define banner height outside the scroll function and also you forgot #, your script looks like this
$(document).ready(function(){
var banner = $("#navscroll");
var bannerHeight = banner.height();
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll >= bannerHeight){
$("#banner").hide();
} else {
$("#banner").show();
}
});
});
I have fixed the code for you and added some comments,
try to open console and scroll to see what is happening.
Basicly you were comparing scroll height to the banner height which changed from 40 to -16 when it got hidden, so you have to save it before.
$(document).ready(function(){
var banner = $("#navscroll");
var bannerStartHeight = $("#navscroll").height();
$(window).scroll(function(){
var scroll = $(window).scrollTop();
console.log("SCROLL: "+scroll)
console.log("BANNER HEIGHT:"+banner.height())
console.log("BANNER START HEIGHT: "+bannerStartHeight)
if (scroll >= bannerStartHeight){
$("#banner").hide();
} else {
$("#banner").show(); //here u forgot a #
}
});
});
Hope it helps
Banner height should be calculated outside the scroll function.
$(document).ready(function() {
var banner = $("#navscroll");
var bannerHgt = banner.height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= bannerHgt) {
$("#banner").hide();
} else {
$("#banner").show();
}
});
});
console.log();
body{
background-color: azure;
}
.divi{
width: 500px;
height: 500px;
}
#divi1{
background-color: red;
}
#divi2{
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Stylesheet for Mysite -->
<title>My Site</title>
</head>
<body>
<!-- Banner -->
<div id="banner" class="container-fluid">
<nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">What I do</a>
<a class="nav-item nav-link" href="#">Find Me</a>
</div>
</div>
</nav>
</div>
<!-- Banner -->
<!-- Divs -->
<div class="container-fluid">
<div id="divi1" class="divi"></div>
<div id="divi2" class="divi"></div>
</div>
<!-- Divs -->
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Here I have the code for a bootstrap navigation bar:
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="btnActive = navButton">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Everything works great, except for the fact that when you click one of the buttons on the navigation and then click another one, the previous one you clicked doesn't get deactivated (aka the 'active' class isn't removed aka it remains highlighted). How can I fix this?
You can use function in controller to update variable for active button.
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
$scope.updateActive = function(navButton) {
$scope.btnActive = navButton;
};
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="updateActive(navButton)">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is similar solution.
I don't know why it works with function, but don't work with interpolation in view. Possible, you get many local scopes in view.
i want to create a navigation bar in bootstrap
everything works fine except one. when ever I resize the browser to width of mobile and click on the toggle button the dropdown menu does not open.
Please help me. All I wanted is "when ever i click on the stacked toggel button i want the drop down to open".
I have also made changes to class as well as ids in data-toggle attribute of the button.
I have included jquery, bootstrap js and bootstrap css. I have displayed the entire code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script src="_sources/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">LOGIN<i class="caret"></i></li>
<li class="dropdown">REGISTER<i class="caret"></i></li>
<li class="btn-danger">PUBLISH YOUR AD FOR FREE</li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
</header>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>
Try the following code to include jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Updated :
Are you sure that you linked bootstrap js file properly ?
Remove bootstrap js from ,Try by adding them before </body> and after jQuery library. Below is the correct code (Hope :) )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">LOGIN<i class="caret"></i></li>
<li class="dropdown">REGISTER<i class="caret"></i></li>
<li class="btn-danger">PUBLISH YOUR AD FOR FREE</li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="_sources/bootstrap/js/bootstrap.js"></script>
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>