Develop Reference

jQuery Function to bring in "offcanvas" slide-in menu is not working

I have tried and searched the internet dry without any solution to my problem. I have created an list in which I modified to be located off the main screen as a slide-in menu using transform: translate (-100%). When the main navbar collapses into the mobile button, I intend to assign a jQuery function to the button in order to slide-in the offcanvas menu. However, the button does not respond no matter what and I need some aid. Any help is greatly appreciated!
/..The main navbar../
<nav class="main-navigation" role="navigation">
<ul>
<li class="products1">Products</li>
<li class="store1">Store</li>
<li class="about1">About Us</li>
<li class="discover1">Discover</li>
<li class="support1">Support</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
/..The button that dosen't work../
<button class="navbar-toggle pro-toggle pull-left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
/..The menu that I want to slide in but dosen't work../
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="products">Products</li>
<li class="store">Store</li>
<li class="about">About Us</li>
<li class="discover">Discover</li>
<li class="support">Support</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
/..The main CSS for the slide-in menu../
<style>
.main-navigation {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: fixed;
text-align: center;
text-decoration: none;
background-color: white;
transform: translateX(-100%);
transition: transform 1s ease;
}
.main-navigation.open {
transform: translateX(0);
}
</style>
/..The jQuery function that is supposed to slide-in the menu../
<script>
$(document).ready(function() {
$('.pro-toggle').on('click', function(){
${'.main-navigation').toggleClass('open');
});
});
</script>

change
from ${'.main-navigation') to $('.main-navigation').

How to implement this parallax

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});
})

how can i reduce the margin left and top in bootstrap

i need help with my code
using bootstrap to design n new in it. did the top nav, doing the side bar. but the left bar not lapping to the left completelty and the gap between the top and the side is too much. how can i reduce it
<!--BEGINING NAV=========================-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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">
<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="../img/logo.png" alt="Logo"></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">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>General Requirment</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control inputcurve" placeholder="Search">
</div>
<button type="submit" class="btn btn-default redbut"><span class="glyphicon glyphicon-search red"></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 07063859559</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> info#myactiveschool.com</li>
<li class="dropdown">
Chike Okoli Vitalis <span class="caret"></span>
<ul class="dropdown-menu" role="menu nav1">
<li><i class="glyphicon glyphicon-picture"></i> Profile Picture</li>
<li><i class="glyphicon glyphicon-edit"></i> Account Setting</li>
<li><li><a href="#"><i class="glyphicon glyphicon-log-out"></i> Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--END NAV=========================-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked span3">
<li class="active"><i class="glyphicon glyphicon-picture"></i>Home</li>
<li><i class="glyphicon glyphicon-edit"></i>About us</li>
</ul>
</div>
</div>
<!--START SIDE NAV===================================================================================================================================-->
here is my css
.side-nav {
position: fixed;
top: 51px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: #222;
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
}
.side-nav>li>a {
width: 225px;
}
.side-nav li a:hover,
.side-nav li a:focus {
outline: none;
background-color: #000 !important;
}
}
.side-nav>li>ul {
padding: 0;
}
.side-nav>li>ul>li>a {
display: block;
padding: 10px 15px 10px 38px;
text-decoration: none;
color: #999;
}
.side-nav>li>ul>li>a:hover {
color: #fff;
}
.side-nav{right: 0;left: auto;}

Set up a different Bootstrap menu breakpoint, but menu won't display on this breakpoint

I have set up custom
I have set up a new breakpoint so that the mobile menu appears at 1200px with the following css:
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
the issue is that when I get to that breakpoint the mobile menu always collapses and never reveals,
Here is the markup:
<nav class="navbar navbar-inverse a-1-navbar a-1-navbar-shadow" role="navigation" id="a-1-main-menu">
<div class="container">
<div class="navbar-header a-1-navbar-header">
<button type="button" class="navbar-toggle a-mobile-toggle" data-toggle="collapse" data-target="#a-menu" style="float:left;">
<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 a-1-logo-wrapper" href="#" style="float:right;">
<img class="hidden-xs a-1-logo" src="life.png" alt="">
<img class="visible-xs a-1-logo" src="life.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="a-menu" >
<ul class="nav navbar-nav navbar-right a-menu-bar">
<li class="active"> Vehicles <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Specials <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Finance & Insurance <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Servicing <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Parts <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Contact <span class="glyphicon glyphicon-chevron-down"></span></li>
</ul>
</div>
</div>
Is some custom JavaScript needed?

I've tested your code and there's no problem in revealing collapsed items.
Perhaps you should check the following thing first:
Did you include jQuery?
Did you include Bootstrap3 js resource?
Did you include collapse plugin in your Bootstrap3 js resource?
For Bootstrap3 you need to add more lines in your css
While there's no problem hiding collapsed items, it DOES have problem when showing the dropdown list. The problem is you miss out this:
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
Here's the example on Codepen.

Multiple classes in one div

This has been wreaking my head all day and before I give up I thought I'd see if anyone could help me out.
I have a sticky header that moves down the page when scrolled. I'm using bootstrap and have two classes in one div - navbar for the regular view and navbarSticky for the sticky effect when scrolled.
The problem is when I have both classes in the div, the navbar class completely disappears but navbarSticky works and navbar will only return when the navbarSticky class is deleted from the div. I was thinking it must have something to do with CSS - navbarSticky having more precedence over navbar.
I would really appreciate it if someone could help me out.
This is my navbar :
<div class="navbar navbarSticky navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="row">
<div class="logo col-xs-6 col-md-6">
<ul class="pull-left">
<li>Theme</li>
</ul>
</div>
<div class="nav col-xs-6 col-md-6">
<ul class="pull-right">
<li>Home</li>
<li class="dropdown">
Products
<ul>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
</ul>
</li>
<li>Services</li>
<li>Join</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="menu-button col-xs-6 col-md-6">
<ul class="pull-right">
<li>
<button id="menu-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>
</li>
</ul>
</div>
</div>
</div>
<div id="nav-dropdown" class="nav-dropdown col-xs-12 col-md-12">
<ul>
<li id="form">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
<li>Home</li>
<li class="dropdown">
Products
<ul>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
</ul>
</li>
<li>Services</li>
<li>Join</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
This is my jquery
$(window).scroll(function (){
if($(window).scrollTop() > 65)
{
$("navbar").addClass('navbarSticky');
$(".navbarSticky").css({
'display':'block'
})
}
else{
$("navbar").removeClass('navbarSticky');
$(".navbarSticky").css({
display:'none'
})
}
});
This is my css
.navbar
{
background: #ffffff;
color: #2d3238;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 100px;
}
.navbarSticky
{
background: #ffffff;
box-shadow: 1px 5px 15px #ccc;
color: #2d3238;
display: none;
top: 0;
height: 100px;
left: 0;
right: 0;
position: fixed;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
z-index: 9999;
}
Update:
I Finally have it working, i just needed to change navbar in jquery to .navbar but now i have some wierd jumping down effect of the navbarSticky when it crosses over from the navbar. Could someone help?

navbarSticky overwrites every property on navbar. It isn't that the navbar class disappears, it is that none of it's own css properties dominate so you see none of it until the dominating navbarSticky class has been removed.