I tried to use this solution (Hide Twitter Bootstrap nav collapse on click) to hide nav collapse automatically when clicking. It's working correctly when nav is collapsed but when I'm using site on desktops (exactly when nav is not collapsed) nav is blinking.
Code:
$('.nav a').on('click', function() {
$(".btn-navbar").click(); //bootstrap 2.x
$(".navbar-toggle").click() //bootstrap 3.x by Richard
});
.block {
padding: 70px 0;
}
#section-white {
background-color: #fff;
height: 100px;
}
#section-1 {
margin-top: 51px;
/* height of header-navbar */
}
#section-1,
#section-2,
#section-3 {
height: 600px;
background-color: #555;
color: #fff;
}
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</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 class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#section-1">About</a>
</li>
<li>
<a class="page-scroll" href="#section-2">Services</a>
</li>
<li>
<a class="page-scroll" href="#section-3">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="block" id="section-1">
<div class="container">
<div class="row">
Hello World
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.block -->
<div id="section-white"></div>
<div class="block" id="section-2">
<div class="container">
<div class="row">
Hello World
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.block -->
<div id="section-white"></div>
<div class="block" id="section-3">
<div class="container">
<div class="row">
Hello World
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.block -->
You can try it here - Desktop results and this is source code - source code
Earlier I used this solution in Bootstrap 2.3.2 and haven't got any problem.
Try this:
JS
$('.nav a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
Check the updated fiddle.
Also check this answer: Close responsive navbar automatically
Related
I have developed single page website and used bootstrap scroll spy when i click on nav item border bottom is not displaying before for this issue
i have added script now there is no issue in this.
But when i click nav link smooth scroll is not working link directly placing to
particular section without smooth scroll please anyone help me on this
Reference : http://floretmedia.net/temp/pbee/
<script>
$(document).ready(function(){
var headerHeight = $('header').innerHeight();
scrollTop: target.offset().top - headerHeight //offset height of header here too.
});
</script>
<body id="lcp1" data-spy="scroll" data-target=".navbar" data-offset="70">
<header>
<div class="custom-container">
<div class="header-right">
<div class="navbar-holder"> <!-- navbar-holder -->
<nav class="navbar navbar-default"> <!-- navbar-inverse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="ease cf">
<a class="navbar-brand" href="./">
<img src="images/logo.png" alt="sfatech Logo">
</a>
</div>
</div> <!-- /.navbar-header -->
<div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
<ul class="nav navbar-nav navbar-right navbrdr">
<li class="active">HOME </li>
<li> FEATURES </li>
<li>PRICING</li>
<li>CONTACT</li>
<li>SIGN UP</li>
</ul> <!-- /.navbar-nav -->
</div> <!--/.nav-collapse -->
</nav> <!-- /.navbar-inverse -->
</div> <!-- /.navbar-holder -->
</div><!-- header-right -->
</div><!-- custom-container -->
</header>
You can try with this one
jQuery(document).ready(function(){
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
})
without javascript, add this code in your CSS file
html{
scroll-behavior: smooth;
}
I have created one-page website. I have used bootstrap menu with the smooth scroll. When the user clicks on particular section, that section is targeting with the smooth scroll. There is no issue on the desktop.
But when it comes to mobile version,
When I click on Feartures then it's targeting the Featues section with smooth scroll but the menu is still shown on the mobile but whe i click feature section the bootstrap dropdown menu should close.
Please check my code: http://floretmedia.net/temp/pbee/
<script type="text/javascript">
$(document).ready(function(){
$(".navbar-toggle").click(function(){
if($(".navbar-nav li a")attr("href")){
$(".navbar-toggle in").css("display", "none!important");
}else{
$(".navbar-toggle in").css("display", "block");
}
});
function handler(click) {
var target = $(".navbar-nav li a");
if ( target.is(".navbar-nav li a")) {
target.children().toggle();
}
}
$("navbar-toggle").click( handler ).find(".collapsed").show();
});
</script>
<header>
<div class="custom-container">
<div class="header-right">
<div class="navbar-holder"> <!-- navbar-holder -->
<nav class="navbar navbar-default"> <!-- navbar-inverse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="ease cf">
<a class="navbar-brand" href="./">
<img src="images/logo.png" alt="sfatech Logo">
</a>
</div>
</div> <!-- /.navbar-header -->
<div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
<ul class="nav navbar-nav navbar-right navbrdr">
<li class="active">HOME </li>
<li> FEATURES </li>
<li>PRICING</li>
<li>CONTACT</li>
<li>SIGN UP</li>
</ul> <!-- /.navbar-nav -->
</div> <!--/.nav-collapse -->
</nav> <!-- /.navbar-inverse -->
</div> <!-- /.navbar-holder -->
</div><!-- header-right -->
</div><!-- custom-container -->
</header>
var mobileMenuButtons = $('.navbar-nav li a');
mobileMenuButtons.on('click', function() {
if ($( document ).width() < 768) {
$('.navbar-toggle').click();
}
});
This code added your js file. Good luck :)
Navbar uses the Bootstrap collapse plugin so you can just call it manually without having to deal with viewport width detection (which can be unreliable):
$('.navbar-nav > li > a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
Using bootrap nav-fix top, In mobile mode the fixed navigation bar scrolls using the carousel, only in mobile mode this happens
i try fix with css change but no sucess
i dont know to fix that, thanks for help
Exemple
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
</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 class="hidden">
</li>
<li>
<a class="page-scroll" href="#fotos">Fotos</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contato</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Galeria Section -->
<section id="fotos" class="bg-light-gray">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galeria de Fotos</h2>
<br>
</div>
<div class="row">
<div class="carousel slide article-slide" id="myCarousel">
<div class="carousel-inner cont-slider">
<div class="item active">
<img src="http://placehold.it/1200x440/cccccc/ffffff">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>$('#myCarousel').carousel({
interval: 4000
});
</script>
You Can use the following media queries its work fine for your issue.
#media (max-width:767px) { .navbar-static-top { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; } }
I have the following JSFiddle code
https://jsfiddle.net/mwcf086c/
.navbar-collapse.in,
.navbar-collapse.collapsing {
clear: left;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Profile
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
[Using Bootstrap and in mobile mode]
I would like that when the menu be expanded, it cover all the page.
See the following image.
Any idea on how to achieve this?
Thanks
Add height: 100vh !important; to your css in the .navbar-collapse.in, .navbar-collapse.collapsing class
.navbar-collapse.in, .navbar-collapse.collapsing {
clear: left;
}
.navbar-collapse.in {
height: 100vh !important;
}
Here is a fiddle: https://jsfiddle.net/L2fqzswk/1/
My navbar has a dropdown menu in it that will not toggle when a user navigates to a page with the affix.js functionality on it. I'm building this in Visual Studio 2012, so its a master/content page setup. On any other page, the navbar works fine, so I assume it has to do with affix.js because it is the only differing element.
Master navbar:
<nav class="navbar navbar-default" id="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="Home.aspx">
<img src="../Images/#######.png" class="img-responsive" alt="Bauen Group logo"/>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Products & Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Consulting</li>
<li>Filler</li>
<li>Product Documentation</li>
</ul>
</li>
<li class="dropdown">
Company <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</li>
<li>Customer Portal</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On the content page, I added an extra reference to my jquery and bootstrap .js files in the header because I was getting an exception that jquery was not defined. The .js files are also referenced at the bottom of the master page.
Content page:
<script type="text/javascript">
$(document).ready(function () {
$('#sidebar').affix({
offset: {
top: 245
}
});
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
});
</script>
<div class="container" id="top">
<div class="row">
<div class="col-lg-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
//<li><a>side bar content</a></li>
</ul>
</div>
<div class="col-lg-9">
//content
</div>
</div>
Not too sure whats going on. I wonder if anyone else has had this problem. Any help would be appreciated.
I took the javascript references out on the content page. I solved my issue with the dropdown list by taking the jquery script in the content page header and inserting it into the code of the master page below the javascript references.