Is it possible to make Bootstrap only collapse the nav bar when the user is X pixels down the page?
I know this can be done for Affixing the menu by using the data attribute data-offset-top. But using this same attribute on the collapse button or on the nav div doesn't achieve this.
<nav class="navbar">
<div class="container-fluid">
<div>
<a class="navbar-brand" href="/"><img src="img/logo.png" alt=""/></a>
</div>
<!-- Affix Navbar when 280px from top: This works -->
<div class="navbar-header pull-right" data-spy="affix" data-offset-top="280">
<!-- Collapse Navbar when 280px from top: Doesn't work -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-offset-top="280" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<!-- The below should collapse only when the user is 280px or more from the top -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a class="text-uppercase page-scroll" href="#call-to-action">home</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
You could always do it yourself with jquery.
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 150; // set to whatever you want it to be
if(y_scroll_pos >= scroll_pos_test) {
$('#navbar-collapse').collapse('hide');
} else {
$('#navbar-collapse').collapse('show');
}
});
Note: Builds on this answer
If you are using lodash/underscore, you could use throttle to make sure the function doesn't execute too often.
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');
});
so I have a sticky header on a website project that is using single page layout as expected. Just because my header is quite big because of the logo, whenever I scroll it covers the headers of each section. I was wondering is it a way to offset the margin whenever a link is clicked on scroll with like margin-top: 150px;. I also have a content that is using absolute position and I want to specify another selector that is only scrolling on fixed with for a specific page-section. I hope that makes sense, I will post a part of the html and jquery code that I have so far:
HTML:
<header>
<div class="container-fluid example5">
<nav class="navbar navbar-default navigation1">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <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 scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li>
<li>ABOUT</li>
<li>SERVICES</li>
<li><a class="red scroll-link" data-id="hot-offers" href=".hot-offers">HOT OFFERS</a></li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!-- content -->
<div id="#carousel-example" class="page-section">
<h1>Header</h1>
<p>CONTENT....</p>
</div>
<div id="about" class="page-section"><h2>Header</h2>
<p>CONTENT....</p></div>
<div id=".services" class="page-section"><h3>Header</h3>
<p>CONTENT....</p></div>
jQuery:
$('a').click(function (e) {
e.preventDefault();
var curLink = $(this);
var scrollPoint = $(curLink.attr('href')).position().top;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
})
$(window).scroll(function () {
onScrollHandle();
});
function onScrollHandle() {
//Navbar shrink when scroll down
$(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50);
//Get current scroll position
var currentScrollPos = $(document).scrollTop();
//Iterate through all node
$('#navbar5 > ul > li > a').each(function () {
var curLink = $(this);
var refElem = $(curLink.attr('href'));
//Compare the value of current position and the every section position in each scroll
if (refElem.position().top <= currentScrollPos && refElem.position().top + refElem.height() > currentScrollPos) {
//Remove class active in all nav
$('#navbar5 > ul > li').removeClass("active");
//Add class active
curLink.parent().addClass("active");
}
else {
curLink.parent().removeClass("active");
}
});
}
Coudn't understand what exactly you want, but for a beginnig let's try to make your code works first,
i removed the scrollHandle() function, and corrected your html,
now try to explain to me what you want and i'll edit my answer.
$('a').click(function (e) {
e.preventDefault();
var curLink = $(this);
var scrollPoint = $(curLink.attr('href')).position().top;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<div class="container-fluid example5">
<nav class="navbar navbar-default navigation1">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <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 scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li>
<li>ABOUT</li>
<li>SERVICES</li>
<li><a class="red scroll-link" data-id="hot-offers" href="#hot-offers">HOT OFFERS</a></li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!-- content -->
<div id="about" class="page-section"><h2>about</h2>
<p>CONTENT....</p></div>
<div id="services" class="page-section"><h3>services</h3>
<p>CONTENT....</p></div>
<div id="hot-offers" class="page-section"><h3>Hot Offers</h3>
<p>CONTENT....</p></div>
<div id="testimonials" class="page-section"><h3>testimonials</h3>
<p>CONTENT....</p></div>
<div id="contact-us" class="page-section"><h3>Contact US</h3>
<p>CONTENT....</p></div>
<div style="height:300px"/>
similar questions have already been answered, but I'm having trouble implementing them in my own code:
Add active class to current page navigation link
Dynamically change CSS of link based on current page
jQuery active link current page
Basically, I'm trying to figure out how to add a class to an anchor tag if the anchor tag matches the current page the user is on. I have three html pages - Index, About, and Contact. They all have the same navbar.
-----------------------------------Index.html----------------------------------------------------------------------
<nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
<div class="container">
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navAnchor" href="about.html">About |</a></li>
<li><a class="navAnchor" href="contact.html">Contact |</a></li>
</ul>
</div>
</div>
</nav>
-----------------------------------About.html----------------------------------------------------------------------
<nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
<div class="container">
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navAnchor" href="about.html">About |</a></li>
<li><a class="navAnchor" href="contact.html">Contact |</a></li>
</ul>
</div>
</div>
</nav>
-----------------------------------Contact.html----------------------------------------------------------------------
<nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
<div class="container">
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navAnchor" href="about.html">About |</a></li>
<li><a class="navAnchor" href="contact.html">Contact |</a></li>
</ul>
</div>
</div>
</nav>
In my css, my .navAnchors are syled. I want to also add class .current to the anchor tag that matches the page the user is currently on.
----------------------------------index.css-----------------------------------
.navbar-collapse > .nav > li > a:link,
.navbar-collapse > .nav > li > a:visited
{
color: #95a1aa;
font-size: 15px;
}
.current {
color: pink;
}
I'm currently trying this function in JavaScript, but it's not working:
------------------------index.js-----------------------
var path = window.location.pathname.split("/").pop();
var link = $(".navAnchor");
window.setInterval(function(){
for(var i = 0; i < 2; i++) { //2 refers to the number of links on nav page (about and contact)
if(path === link.eq(i).attr('href')){
link.eq(i).addClass("current");
}
}
}, 5000);
The links for the pages are:
(index.html) https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/index.html?_c9_id=livepreview8&_c9_host=https://ide.c9.io
(about.html) https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/about.html
(contact.html) https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/contact.html
Any help or tips are appreciated!!
--------------------------------------EDIT---------------------------------------------
The following works for me (in my javascript tab)
$(document).ready(function(){
var path = window.location.pathname.split("/").pop();
$(".navAnchor").each(function(){
if($(this).attr('href') == path){
$(this).css("color", "black");
$(this).css("font-weight", "bold");
}
})
})
You want the current class to be on the li - not the a. Iterate over your navlink a's and check the href and if it matches your path variable - add the current class to the a's parent (the li). However - if you decide you want the Current class on the a - just ingnore the parent() in the code and it should work fine. Also - just noted that you have the pages titled with capital letters- but your hrefs are lowercase - eg: About.html vs about.html. These will need to be the same case.
$(document).ready(function(){
var path = window.location.pathname.split("/").pop();
$(".navAnchor").each(function(){
if($this).attr('href') == path){
$(this).parent().addClass('current');
}
})
})
I'm sure it's very simple but I'm pretty new at Bootstrap and even html/css.
I want my navbar to be after my header and fixed to the top when scrolling past it.
I got this working, BUT: the navbar becomes transparent and unclickable when scrolling and above my other content.
How do i overcome this?
Here's my .html:
`
<div id="nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<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>
Your Company
</div>
<div class="collapse navbar-collapse" style>
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Everyday
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
`
Here's my affix .css:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
Here's my affix related js:
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
Thank you!
Change the z-index of #nav to :
#nav{
z-index:9999;
}