2 problems when trying to implement this:
Putting it in the body breaks the sticky nav.
Scroll bar on div.
If i try to do http://keithclark.co.uk/articles/pure-css-parallax-websites/ in a div. It causes a scrollbar in that div.
Trying to counter it by putting it in the body directly breaks the sticky nav (made using bootstrap).
Here is the pen http://codepen.io/dam0/pen/zviHr that I tried to do also. Similar concept.
I only need a parallax on a div. The different element speed type. Any help?
Here's the html structure i have. Please take a look. I already some put comments there.
I'm trying to make it Pure CSS as long as possible. But if it can't be done, help me with js.
EDIT: Added a Pen
http://codepen.io/anon/pen/qZVEgM
Adding the .parallax to the div i want to have a parallax effect causes it to have scrollbar. Putting the parallax class to the body will break the position:fixed of the sticky nav.
EDIT 2: Moved the pen code here
HTML:
<div class="parallax holder">
<div id="carousel" class="parallax__layer parallax__back carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
<div class="item">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
</div>
</div>
<div id="headerCaption" class="parallax__layer parallax__layer--base">
<img src="http://healthyaxcess.ph/img/CaptionBg.png" id="curve" class="img-responsive center-block">
</div>
</div>
<div id="nav-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
<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="#navbar-collapse" 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="#"><img src="http://healthyaxcess.ph/img/logo.png"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-shopping-cart"></i> Cart</li>
<li><i class="fa fa-user"></i> Sign Up/Login</li>
</ul>
<!-- Nav links -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="nav-section">
<li class="current active">
First Section
</li>
<li>
Second Section
</li>
<li>
Third Section
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
<li>Dropdown link 3</li>
</ul>
</li>
</ul>
</div><!-- End of navbar collapse -->
</div><!-- End of Container Fluid -->
</nav>
</div>
<div class="container main">
<div class="text-center" id="section-2">
<h1>Sample Title</h1>
<p>The sample title's description here.</p>
</div>
CSS:
.navbar-inverse {
background: #303030;
}
#navbar-main {
margin: 0;
}
/* To override the static-top */
#navbar-main.affix {
position: fixed;
top: 0;
width: 100%;
}
#media (min-width: 992px) {
#navbar-main .navbar-nav {
position: relative;
margin-top: 16px;
}
}
.main {
/* for example only */
min-height: 200px;
}
.navbar-brand {
padding: 0;
/* firefox bug fix */
height: 80px;
}
.navbar-brand>img {
height: 100%;
padding: 8px;
/* firefox bug fix */
width: auto;
position: relative;
}
#footerBox {
background-color: #303030;
color: #FAFAFA;
}
.holder {
display: none;
}
#headerCaption {
position: relative;
}
#headerCaption img {
z-index: 3;
position: absolute;
width: 100%;
}
.carousel {
position: relative;
}
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
JS:
$('#carousel img').on("load", function(){
$('body').scrollspy({ target: '#navbar-collapse' });
$('.holder').css('display', 'block');
$('#nav-wrapper').height($("#navbar-main").height());
$('#navbar-main').affix( { offset:{ top:$('#navbar-main').offset().top } } );
$('.carousel').carousel({pause: false});
})
Related
i'm creating a website and want to have a hero image that takes up 100% height of the viewport at different device heights.
I have used the vh property in CSS to set both the bootsrap navbar and hero image to 100% of the viewport height, which has worked as intended but I think it's has some unintended consequences.
In a mobile view when I click the toggler to bring the mobile navbar down the height of the hero image adjusts, but when I try to close the navbar again the toggler completely dissapears, I think this is because of the hero image then trying to take the entirety of the viewport height not leaving space for the toggle icon?
The 100vh also means that the navbar cannot be sticky, when the screen scrolls past the hero image the navbar stays - it cannot pass the hero image.
I'm assuming both these issues stem from them both being encased in a 100vh div together, but have tried to find a solution to no avail.
Is there another workaround for what I am trying to achieve that would be better practice, or is there something I have done wrong in my markup.
HTML
<!-- Creates section for navbar and the hero image to take up 100% of the height of viewports - responsive and works at all screen sizes -->
<div class="landingBanner">
<!-- open the navbar -->
<nav class="navbar navbar-expand-md" id="home">
<!-- set content of the navbar fluid -->
<div class="container-fluid">
<!-- set the content of the navbar to width 80% -->
<div class="content" id="navbarContent">
<!-- hamburger button that appears in medium screens - click to toggle navbar so that it does not take up so much room on mobile devices -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<!-- font awesome hamburger icon -->
<i class="fas fa-bars"></i>
</button>
<!-- everything inside div is toggleable with the button -->
<div class="collapse navbar-collapse" id="navbarContent">
<!-- mx-auto centers the navbar -->
<ul class="navbar-nav mx-auto">
<li class=" nav-item ">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item ">
<!-- One page referenced by using the ID of the target section -->
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<!-- drop down for acquisition criteria -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#whatWeDo" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">What We Do</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#whatWeDo">Information</a></li>
<li><a class="dropdown-item" href="acquisitionCriteria.html">Acquisition Criteria</a></li>
</ul>
</li>
<li class="nav-item ">
<a class="nav-link" href="#theTeam">The Team</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#contactUs">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- End of navbar -->
<!-- Beginning of hero image -->
<section class="banner">
<div class="content bannerContent">
<!-- Puts logo to the responsive width of content -->
<img src="img/logo.png" alt="organization logo" id="logo">
<!-- div for arrow centers the arrow and puts it at the bottom of the div - responsive -->
<div class="arrow">
<!-- font awesome arrow -->
<i class="fas fa-angle-down"></i>
</div>
</div>
</section>
<!-- end of hero image -->
</div>
<!-- end of responsive landing section -->
CSS
/*
*
* navigation bar, branding and landing hero image
*
*/
.landingBanner {
height: 100vh;
width: auto;
}
.navbar,
.navbar-nav {
background-color: black;
text-align: center;
}
.navbar {
padding-top: 1%;
padding-bottom: 1%;
}
.navbar-brand {
color: #EA1830;
text-decoration: none;
}
.nav-link {
color: white;
margin-left: 5px;
margin-right: 5px;
}
.nav-link:hover {
color: #EA1830;
font-weight: bold;
}
.dropdown-menu {
background-color: black;
}
.dropdown-item {
color: white;
}
.dropdown-item:hover {
color: #EA1830;
font-weight: bold;
background-color: black;
}
.fa-bars {
color: white;
font-size: 30px;
}
#logo {
margin: 0 auto;
width: 100%;
height: auto;
}
.banner {
background-image: url("../../img/banner.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: auto;
}
.bannerContent {
padding-top: 5%;
text-align: center;
align-content: center;
color: #EA1830;
}
.bannerContent h1 {
font-size: 350%;
padding-bottom: 5%;
}
.arrow {
position: absolute;
bottom: 0px;
left: 50%;
}
.fa-angle-down {
font-size: 300%;
color: #EA1830;
}
Would really appreciate any help that someone may be able to provide, and hope it makes sense what i'm trying to achieve!
I have such a layout:
I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like this but I don't understand how to make it work.
For now I have my header:
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
<a class="navbar-brand" href="#">...</a>
</div>
But I don't know how to make it collapse when one clicks.. Thanks
In a rough way you could assign 2 classes (one for the icon, one for the relative text) for example, class "icon" and class "text", and on button click, toggle (hide and show) the element with the class "text". Then in a callback you could animate the resizing of the sidebar.
Edit2: Improved example
$('#togglebutton').click(function() {
if ($(window).width() > 500) { //your chosen mobile res
$('.text').toggle(300);
} else {
$('.menu').animate({
width: 'toggle'
}, 350);
}
});
.wrapper { width: 100% }
.menu {
background: #222;
float: left;
display: block;
}
.icon { max-width: 1em }
.menu ul {
list-style-type: none;
margin: 0;
padding: 0.2em 0.5em;
}
.menu li { margin: 0 }
.menu a, .menu a:visited {
color: white;
text-decoration: none;
}
.text {
display: inline;
margin: 0;
}
.content { display: block; }
button { margin: 1em; }
#media only screen and (max-width: 500px) {
.text {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="menu">
<ul>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 1</p>
</a>
</li>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 2</p>
</a>
</li>
</ul>
</div>
<div class="content">
<button id="togglebutton">☰</button>
</div>
</div>
Hope it was useful to have a general idea of my suggestion.
Update 2019
Bootstrap 4
This is also possible in Bootstrap 4, but still requires extra CSS to handle the sidebar state.
https://www.codeply.com/p/e5IcpodgE2
Bootstrap 3
You can create an "off canvas" sidebar, and then use Bootstrap's responsive utility classes to toggle display of the icons.
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="menu">
<li><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></li>
<li><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></li>
<li><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></li>
<li><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></li>
</ul>
</div>
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<i class="fa fa-navicon"></i>
<p>
content...
</p>
</div>
</div>
</div>
https://www.codeply.com/p/uunNOeQAqo
I am trying to create an Offcanvas Left nav bar that can be brought into view on button click.
Currently it opens fine but when it closes the top navigation of the page is very jumpy and closes instantly without an animation.
The left bar also overlaps the footer and the footer doesn't move the way it should like the top nav bar.
Bootply
Added -webkit-transition: all 1s ease; to the footer and wrapper class, because everything has to be animated.
I set overflow hidden on html, body selector, this is a fix for the jumpy footer.
The only thing left to do now is adding two lines in your javascript:
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
and
(".footer").css('-webkit-transform', 'translate(0, 0)');
I'm no expert so feel free to correct me, but i think it works the way you want it to.
$(document).ready(function() {
var menu = "close";
$(".menuToggle").click(function() {
if (menu == "close") {
$(".leftNavbar").css("-webkit-transform", "translate(0, 0)");
$(".wrapper").css('-webkit-transform', 'translate(20%, 0)');
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
menu = "open";
} else {
$(".leftNavbar").css("-webkit-transform", "translate(-100%, 0)");
$(".wrapper").css('-webkit-transform', 'translate(0, 0)');
$(".footer").css('-webkit-transform', 'translate(0, 0)');
menu = "close";
}
});
});
/* CSS used here will be applied after bootstrap.css */
.leftNavbar {
position: fixed;
width: 20%;
left: 0;
overflow: hidden;
background-color: green;
-webkit-transform: translate(-100%, 0);
-webkit-transition: all 1s ease;
}
.menuToggle .navbar-toggle .icon-bar {
background-color: black;
}
.menuToggle .navbar-toggle {
display: block;
float: left;
border: 1px solid gray;
margin-left: 5px;
margin-top: -10px;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
-webkit-transition: all 1s ease;
}
footer,
.push {
min-height: 40px;
height: auto;
}
.footer {
color: white;
-webkit-transition: all 1s ease;
}
<div class="leftNavbar">
<h2>Sidebar menu</h2>
<nav>
Home
About
Contact
Prices
</nav>
</div>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand">
<img id="logo" src="Logos/LetterHillustrator.png">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Services
</li>
<li>Our Prices
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!--------SIDE NAVBAR-------->
<!--<div class="leftNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="active"><span class="glyphicon glyphicon-chevron-right"></span> Home</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 1</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 2 (active)</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 3</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 4</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 5</li>
</ul>
</div>-->
<!-----SIDEBAR------->
<div class="menuToggle">
<button class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="push"></div>
</div>
<footer class="footer navbar-inverse">
<div class="container">
<h6 style="width:50%; text-align:center;">34 The Broadway, Greenford UB6 9PT, tel: 020 8575 0880, Email: info#GoodHome.co.uk</h6>
</div>
</footer>
I'm having a lot of time creating a sidebar that is flush with my current bootstrap carousel. Here's what my current site looks like:
http://i.imgur.com/lwEox4a.png
And here's what I'm trying to achieve after a user clicks the media object button:
http://i.imgur.com/nbNVDLy.png
I've been trying to do this for a while now and the sidebar always ends up moving the picture down, on top of the arrows, or completely behind the carousel. Can someone help with this or show me a template that achieves this?
Also this is a single plage design so if you also know of a way for the sidebar to basically remain frozen on the left side of the page no matter what part of the site you are on, please tell me!
Thanks
Edit: The site, materializecss, is kind of is what I'm aiming for. I don't even really care about the media object button.
Edit 2: So I'm using this carousel and this one page template
http://startbootstrap.com/template-overviews/full-slider/
http://startbootstrap.com/template-overviews/scrolling-nav/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<!-- Navigation -->
<!-- Full Page Image Background Carousel Header -->
<div class="navmenu navmenu-default navmenu-fixed-left">
<a class="navmenu-brand" href="#">Project name</a>
<ul class="nav navmenu-nav">
<li>Slide in</li>
<li>Push</li>
<li class="active">Reveal</li>
<li>Off canvas navbar</li>
</ul>
<ul class="nav navmenu-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/460/345/cats" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/abstract" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/transportation" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Intro Section -->
<!-- <section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scrolling Nav</h1>
<p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
<a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section> -->
<!-- About Section -->
<section id="photos" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Photos section</h1>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="projects" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Projects Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="recognition" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Recognition Section</h1>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="teammembers" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Team Members Section</h1>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="contact" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
<!-- Page Content -->
<div class="container">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3326.973484035864!2d-111.93373599999995!3d33.50206699673241!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872b749e6453718b%3A0x2efd3ce15e57a886!2sNorris+Architects+LLC!5e0!3m2!1sen!2sus!4v1432435089092" width="1300" height="600" frameborder="0" style="border:0"></iframe></div>
<div class="row">
<div class="col-lg-12">
<h1>Full Slider by Start Bootstrap</h1>
<p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the <code>full-slider.css</code>file.</p>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 0 //changes the speed
})
</script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
</body>
</html>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
html, body {
height: 100%;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: absolute;
left: 0;
right: 0!important;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
.navbar-toggle {
display: block;
}
.navbar {
right: auto;
background: none;
border: none;
}
.container-fluid {
padding: 0px;
}
/*!
* Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0px;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
Jasny Bootstrap has a great offcanvas menu plugin. Using that example with a couple of modifications and this example carousel, I came up with this
(Demo)
CSS
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
html, body {
height: 100%;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: absolute;
left: 0;
right: 0!important;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
.navbar-toggle {
display: block;
}
.navbar {
right: auto;
background: none;
border: none;
}
HTML
<div class="navmenu navmenu-default navmenu-fixed-left">
<a class="navmenu-brand" href="#">Project name</a>
<ul class="nav navmenu-nav">
<li>Slide in</li>
<li>Push</li>
<li class="active">Reveal</li>
<li>Off canvas navbar</li>
</ul>
<ul class="nav navmenu-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/460/345/cats" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/abstract" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/transportation" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Then make sure to include these files if you haven't included them already
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
This is a little funny that same code doesn't produce the same behavior.
http://jsfiddle.net/5n3ygvhe/
This is the jsfiddle code.
It is a good demo of spyscroll.
So I copy the codes into my local html file.
Here is my local html file. I am holding the file with appengine. I have checked that jquery, bootstrap.min.css and bootstrap.min.js is loaded correctly. And the version of jquery is 2.1.3 and bootstrap is 3.0.0.
I have tried other jsfiddle for spyscroll, exact same thing happens. Not working on local but working in jsfiddle.
When I scroll the page, the nav li doesn't reflect that and always stick to the last item.
<html>
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> -->
<!-- <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="bower_components/bootstrap.min.css">
<script src="bower_components/bootstrap.min.js"></script>
<style>
.group {
background: yellow;
width: 200px;
height: 500px;
}
.group .subgroup {
background: orange;
width: 150px;
height: 200px;
}
#sidebar.affix {
top: 20px;
}
/* sidebar */
.bs-docs-sidebar {
padding-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
/* all links */
.bs-docs-sidebar .nav>li>a {
color: #999;
border-left: 2px solid transparent;
padding: 4px 20px;
font-size: 13px;
font-weight: 400;
}
/* nested links */
.bs-docs-sidebar .nav .nav>li>a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 30px;
font-size: 12px;
}
/* active & hover links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>li>a:hover,
.bs-docs-sidebar .nav>li>a:focus {
color: #563d7c;
text-decoration: none;
background-color: transparent;
border-left-color: #563d7c;
}
/* all active links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>.active:hover>a,
.bs-docs-sidebar .nav>.active:focus>a {
font-weight: 700;
}
/* nested active links */
.bs-docs-sidebar .nav .nav>.active>a,
.bs-docs-sidebar .nav .nav>.active:hover>a,
.bs-docs-sidebar .nav .nav>.active:focus>a {
font-weight: 500;
}
/* hide inactive nested list */
.bs-docs-sidebar .nav ul.nav {
display: none;
}
/* show active nested list */
.bs-docs-sidebar .nav>.active>ul.nav {
display: block;
}
</style>
<!-- Top Navbar -->
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">
Bootstrap 3.0 Skeleton
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="row">
<!--Nav Bar -->
<nav class="col-xs-3 bs-docs-sidebar">
<ul id="sidebar" class="nav nav-stacked">
<li>
Group A
<ul class="nav nav-stacked">
<li>Sub-Group 1</li>
<li>Sub-Group 2</li>
</ul>
</li>
<li>
Group B
<ul class="nav nav-stacked">
<li>Sub-Group 1</li>
<li>Sub-Group 2</li>
</ul>
</li>
<li>
Group C
<ul class="nav nav-stacked">
<li>Sub-Group 1</li>
<li>Sub-Group 2</li>
</ul>
</li>
</ul>
</nav>
<!--Main Content -->
<div class="col-xs-9">
<section id="GroupA" class="group">
<h3>Group A</h3>
<div id="GroupASub1" class="subgroup">
<h4>Group A Sub 1</h4>
</div>
<div id="GroupASub2" class="subgroup">
<h4>Group A Sub 2</h4>
</div>
</section>
<section id="GroupB" class="group">
<h3>Group B</h3>
<div id="GroupBSub1" class="subgroup">
<h4>Group B Sub 1</h4>
</div>
<div id="GroupBSub2" class="subgroup">
<h4>Group B Sub 2</h4>
</div>
</section>
<section id="GroupC" class="group">
<h3>Group C</h3>
<div id="GroupCSub1" class="subgroup">
<h4>Group C Sub 1</h4>
</div>
<div id="GroupCSub2" class="subgroup">
<h4>Group C Sub 2</h4>
</div>
</section>
</div>
</div>
</body>
<script>
$('body').scrollspy({
target: '.bs-docs-sidebar',
offset: 40
});
$("#sidebar").affix({
offset: {
top: 60
}
});
</script>
Add <!DOCTYPE html> on top of page.
And use $(function() {} wrapper for jQuery