On my Ruby on Rails application, I've finally gotten around to figuring out a sidebar. Now, I'm just having issues with the background hover color. I'm not quite sure how to change this. Here's the CSS for the sidebar thus far:
body,html,.row-offcanvas {
height:100%;
}
body {
padding-top: 50px;
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color:#fff;
float: left;
height:100%;
position:relative;
overflow-y:auto;
overflow-x:hidden;
}
#main {
height:100%;
overflow:auto;
}
/*
* off Canvas sidebar
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width:calc(100% + 220px);
}
.row-offcanvas-left
{
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
Here's the _sidebar.html.erb partial that gets rendered into each page on my rails app:
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h3></h3>
<ul class="nav nav-pills nav-stacked">
<li class="active">Section</li>
<li><%= link_to 'Customers', Customers_path %></li>
<li><%= link_to 'Projects', projects_path %></li>
</ul>
</div>
</div>
For some reason though, unlike the demo that I obtained this code from, the background color when I hover each link in the sidebar is grey and the text turns white, making it extremely hard to read.
Not only that, but I've also tried to paste this JavaScript code into a separate file.js, and calling it after each page:
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
The classes doesn't get toggled as it looks like it should. So I'm having two issues:
I can't seem to get the hover/text color change when I highlight a link
I can't toggle the "class="active"" when I click on one of the links.
Both examples came from: http://www.bootply.com/mL7j0aOINa
Edit
As requested, here's the output of the page:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link data-turbolinks-track="true" href="/assets/bootstrap_custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/customers.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="6nUnsGwrHCTVOf/90d6aHJrG+m7lnv7g2MpOix06j2M=" name="csrf-token" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<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="#"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.navbar -->
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h3></h3>
<ul class="nav nav-pills nav-stacked">
<li>Customers</li>
<li>Projects</li>
</ul>
</div>
</div>
<div id="main">
<div class="col-md-12">
<h1 align="center" class="page-header"></h1>
#deleted this part for example #
</table>
</div>
</div>
</div><!--/row-offcanvas -->
<script type='text/javascript'>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>
Here's the answer to the linked code:
$(document).ready(function() {
$('#sidebar .nav-pills a').click(function() {
$('#sidebar .nav-pills li.active').removeClass('active');
$(this).parent().addClass('active');
});
});
For starters, there is no [data-toggle] attribute being defined, so your click handler was never called. Secondly, the way you wrote your class toggle, every single button would toggle (You'd always have either one active and the rest not, or all of them except that button active and that one not).
We need to see the HTML output from the erb.
Additionally, I don't see any code that this jquery selector would apply to:
$('[data-toggle=offcanvas]')
Bootstrap is generally designed to be overridden with whatever settings you want.
#sidebar > div > ul > li:hover {
color: black;
background-color: gray;
}
should help you out - replace black and gray with whatever colors you want.
TRY
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
color: red!important;
background-color: yellow!important;
}
Please add above css and let me know is it hover problem solved or not??
javascript
$('#sidebar .nav-pills a').click(function() {
$('#sidebar .nav-pills li.active').removeClass('active');
$(this).parent().addClass('active');
});
Related
My navbar currently appears like this when I inspect and put it to a mobile device such as iPhone X:
However, I want it to appear like this when in mobile:
... and for the bar to open up as it does when the button is clicked.
To get it looking like I want, I use display:none in CSS however this then means when you click the button to display it nothing appears. My HTML and CSS is as follows:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//Toggles the nav bar
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
//animates the links
navLinks.forEach((link, index) => {
if (link.getElementsByClassName.animation) {
link.style.animation = ``;
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index /7 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
#media screen and (max-width:640px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
display: none;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
transition: transform 0.5s ease-in;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Lewis Haddon">
<title>Business website</title>
<link rel="stylesheet" href="./css/test2.css" type="text/css">
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>S3</li>
<li>RS6</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
Use visibility: hidden; as CSS.
You can use the #media query to detect whether the client is in used in a mobile environment.
#media screen and (max-width: 500px) {
#navID { visibility: hidden; }
}
Add this code in your css, you can change the pixel from 320 to 350 or 300 for mobile view
#media(max-width: 320px) {
nav{
display: none;
}
}
Use this for toggler on the right:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Try to insert your html and jQuery and not css in the above code.
This would be much easier :-)
You could add overflow: hidden
and width: 100% on your nav.
Also you can set position: absolute and right: -50% (as your links’ container width is set to 50%). This should work without hidden overflow
On responsive menu bar I have close and open menu when page is less than 1120px. When I click on the close width of the primary-nav turn to 0 px.
and not coming to its previous size on page resizing.
The html and css code are as given below.
.primary-nav li a{
color:black;
font-size:15px;
font-family:sans-serif;
}
.primary-nav .clickhere a{
font-weight:bold;
color:red;
}
header a img{
padding:10px;
}
.opennav{
display:none;
}
.primary-nav{
width:80%;
}
#media only screen and (max-width: 1100px) {
.primary-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 5px;
right: -0%;
background-color: #111;
overflow-x: hidden;
transition: .5s;
}
.primary-nav li .closenav{
color:white;
width:250px;
text-align:right;
padding-right:40px;
margin-top:10px;
cursor: default;
}
.primary-nav li a{
width:220px;
color:wheat;
}
.opennav{
display:block;
position:fixed;
left:91.3%;
top:-1%;
}
}
<!doctype html>
<html>
<head>
<title>bloodropes</title>
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
<meta name="title" content="Bloodropes | Homepage" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/stylesheet/home.css" rel="stylesheet" type="text/css">
<script>
function openNav() {
document.getElementById("primary-nav").style.width = "250px";
}
function closeNav() {
document.getElementById("primary-nav").style.width = "0px";
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<header>
<a href="/">
<img src="https://www.google.co.in/logos/doodles/2017/indias-independence-day-2017-6586914957164544-s.png" alt="bloodropes">
</a>
</header>
</div>
<div class="col-md-10">
<h1 onclick="openNav()" class="opennav">☰</h1>
<nav class="navbar">
<ul class="nav navbar-nav primary-nav " id="primary-nav" >
<li>
<h1 onclick="closeNav()" class="closenav">☰</h1>
</li>
<li>
Giving blood
</li>
<li>
about blood
</li>
<li>
Amazing stories
</li>
<li>
News
</li>
<li>
Contact us
</li>
<li>
About us
</li>
<li class="clickhere">
click here to give Blood
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
I want to change to width of primary as it was before the click on close.
You could look at using jQuery, and using the resize function to check if the browser is below 1120px, something similar to...
$(document).ready(function(){
$(window).on("load resize",function(e){
docWidth = $( document ).width();
if(docWidth >= 1120) {
$( "#primary-nav").removeClass("mobile").addClass("desktop"); //set some CSS to 'desktop' class which controls desktop style
}
else {
$( "#primary-nav").removeClass("desktop").addClass("mobile"); //set some CSS to 'mobile' class which controls mobile style
}
});
});
I have got a code for navbar which is working perfectly... Also i have got the code for a collapsable side bar which is also working perfectly. But now i dont understand how to add these two together so that i get a page with navbar and sidebar together.
This is my code for navbar - (complete with html):
<html>
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<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>
<!-- Navbar khatam-->
<!-- Font styles -->
<style type="text/css">
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
</style>
</head>
<body style="background-color:#E6E6FA">
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
</body>
</html>
Those links in the head tag - i got it by simply googling.
Also, my sidebar code is here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
But not now. how do I combine these? I want a page which will have both the top navbar and the sidebar. I have all combinations of pasting the codes but with no luck. What i have latest now - after combining these two is this -
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<link rel="stylesheet" href="styles.css">
<!--Navbar-->
<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>
<!-- Navbar khatam-->
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Sidebar nav -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Sidebar Ends -->
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
By combining it like this, The side bar is working correctly but the top navbar is just a big white block. Nothing in there.
Divide both the sections differently. Put both in one row and give col-2 to the sidebar side and col-10 to the nav-bar side. This way you'll be having a side and nav-bar both side by side, you can also use the nav-bar side for creating a normal webpage. All the best!
First of all, your missing an opening style tag just after your <title>both</title>. (You have a closing /style tag just before your nav). This will apply inline styles for the time being. You should see what you want to achieve now.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
/* styles */
</style>
</head>
But ultimately, you need to copy these styles into a CSS file and then link the CSS file in your HTML like this: <link rel="stylesheet" href="css/styles.css">. That is presuming, your stylesheet is called "styles.css" and is inside a 'CSS' folder.
Have a look at the HTML link tag for linking your external CSS file.
I'm trying to achieve the following EFFECT on page load. The Image starts at 0% opacity and off the page, and then it slides into position while achieving 100% opacity. I've managed to get the opacity to work but not the slide
My code is as follows:
HTML
<head>
title>Nic Brown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function() {
window.onload = function() {
$('#logo').hide().fadeIn(2000);
};
</script>
<script type="text/javascript" src="js/plugins/slideup.js"></script>
</head>
<body>
<div class="navbar navbar-mine navbar-static-top">
<div class="container">
<div class="name">
<a href="#" class="navbar-brand" style="font-family:'norm'; font-size:1.7em; margin-top:3px">NICHOLAS
<em>BROWN</em>
</a>
</div>
<button class="btn btn-default btn-lg navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Social
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
<div class="frontbg">
<img onload="this.style.opacity='1';" src="img/bg/2.png" id="logo" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
CSS
.frontbg {
width: 80%;
height: auto;
left: 10%;
top: 15%;
position: fixed;
}
.frontbg img {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity:0;
-moz-transition:opacity 2s;
-webkit-transition:opacity 2s;
-o-transition:opacity 2s;
transition:opacity 2s;
}
The Other CSS is just Bootstrap Stuff.
Here is the attempted jQuery Slide Up
$(document).ready(function() {
$('.frontbg').delay(3000).animate({bottom:"15%"},600);
});
Your help would be much appreciated. The website can be viewed online HERE
You can actually create that effects without using javascript. using css3's
#keyframes
heres my fiddle http://jsfiddle.net/KaDy8/20/
I guess this will work:
$(document).ready(function(){
$("#myId").css({top:1000,position:'absolute'});
$("#myId").animate({top:100}, 800);
});
do it using css. no needs of Jquery
#-moz-keyframes slidein {
from {margin-bottom:0%;}
to {margin-top:35%;}
}
#-webkit-keyframes slidein {
from {margin-bottom:0%;}
to {margin-top:15%;}
}
for example
A very similar answer here
JQuery Animate() slide div up from bottom of page
$('#content').animate({'margin-top': '50px'}, 1000);
I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top. I'm using Bootstrap, just like this site, but I can't figure out how this site did it. Any help?
Here's the site with the nav bar I'm trying to emulate: http://www.blastprocessor.co.uk/
Here's my navigation html and css code:
HTML:
<div class="navbar navbar-fixed-top" id="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Services</li>
<li>Contact</li>
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
And here's my CSS:
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
I was searching for this very same thing. I had read that this was available in Bootstrap 3.0, but I was having no luck in actually implementing it. This is what I came up with and it works great. Very simple jQuery and Javascript.
Here is the JSFiddle to play around with... http://jsfiddle.net/CriddleCraddle/Wj9dD/
The solution is very similar to other solutions on the web and StackOverflow. If you do not find this one useful, search for what you need. Goodluck!
Here is the HTML...
<div id="banner">
<h2>put what you want here</h2>
<p>just adjust javascript size to match this window</p>
</div>
<nav id='nav_bar'>
<ul class='nav_links'>
<li>Sign In</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
<div id='body_div'>
<p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
Here is the CSS...
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#body_div {
top: 0;
position: relative;
height: 200px;
background-color: green;
}
#banner {
width: 100%;
height: 273px;
background-color: gray;
overflow: hidden;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
//the below css are for the links, not needed for sticky nav
.nav_links {
margin: 0;
}
.nav_links li {
display: inline-block;
margin-top: 4px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}
Now, just add the javacript to add and remove the fix class based on the scroll position.
$(document).ready(function() {
//change the integers below to match the height of your upper div, which I called
//banner. Just add a 1 to the last number. console.log($(window).scrollTop())
//to figure out what the scroll position is when exactly you want to fix the nav
//bar or div or whatever. I stuck in the console.log for you. Just remove when
//you know the position.
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() > 550) {
$('#nav_bar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 551) {
$('#nav_bar').removeClass('navbar-fixed-top');
}
});
});
Note (2015): Both question and the answer below apply to the old, deprecated version 2.x of Twitter Bootstrap.
This feature of making and element "sticky" is built into the Twitter's Bootstrap and it is called Affix. All you have to do is to add:
<div data-spy="affix" data-offset-top="121">
... your navbar ...
</div>
around your tag and do not forget to load the Bootstrap's JS files as described in the manual. Data attribute offset-top tells how many pixels the page is scrolled (from the top) to fix you menu component. Usually it is just the space to the top of the page.
Note: You will have to take care of the missing space when the menu will be fixed. Fixing means cutting it off out of your page layer and pasting in different layer that does not scroll. I am doing the following:
<div style="height: 77px;">
<div data-spy="affix" data-offset-top="121">
<div style="position: relative; height: 0; width: 100%;">
<div style="position: absolute; top: 0; left: 0;">
... my menu ...
</div>
</div>
</div>
</div>
where 77px is the height of my affixed component.
//in html
<nav class="navbar navbar-default" id="mainnav">
<nav>
// add in jquery
$(document).ready(function() {
var navpos = $('#mainnav').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
}
});
});
Here is the jsfiddle to play around : -http://jsfiddle.net/shubhampatwa/46ovg69z/
EDIT:
if you want to apply this code only for mobile devices the you can use:
var newWindowWidth = $(window).width();
if (newWindowWidth < 481) {
//Place code inside it...
}
Bootstrap 4 - Update 2020
The Affix plugin no longer exists in Bootstrap 4, but now most browsers support position:sticky which can be used to create a sticky after scoll Navbar. Bootstrap 4 includes the sticky-top class for this...
https://codeply.com/go/oY2CyNiA7A
Bootstrap 3 - Original Answer
Here's a Bootstrap 3 example that doesn't require extra jQuery.. it uses the Affix plugin included in Bootstrap 3, but the navbar markup has changed since BS2...
<!-- Content Above Nav -->
<header class="masthead">
</header>
<!-- Begin Navbar -->
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="divider"></li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
..
</li>
<li>
..
</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
Working demo/template: http://bootply.com/69848
This worked great for me. Don't forget to put a filler div in there where the navigation bar used to be, or else the content will jump every time it's fixed/unfixed.
function setSkrollr(){
var objDistance = $navbar.offset().top;
$(window).scroll(function() {
var myDistance = $(window).scrollTop();
if (myDistance > objDistance){
$navbar.addClass('navbar-fixed-top');
}
if (objDistance > myDistance){
$navbar.removeClass('navbar-fixed-top');
}
});
}
Use Bootstrap Affix:
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>
You could use position: sticky
#navbar {
position: sticky;
top: 0px;
}
The #navbar should be a direct child of the body though.
For Bootstrap 4, a new class was released for this. According to the utilties docs:
Apply the class sticky-top.
<div class="sticky-top">...</div>
For further navbar position options, visit here.
Also, keep in mind that position: sticky; is not supported in every browser so this may not be the best solution for you if you need to support older browsers.
In answer to Shubham Patwa: This way, the page is "jumpy" soon as the class "navbar-fixed-top" applies. That's because the #mainnav is throwen in and out of the document's DOM flow. This can result in an ugly UX if the page has a "critical height", jumping between fixed and un-fixed #mainnav position.
I altered the code this way, which seems to work fine (not pixel-perfect, but fine):
$(document).ready(function() {
var navpos = $('#mainnav').offset();
var navheight = $('#mainnav').outerHeight();
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
$('body').css('marginTop',navheight);
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
$('body').css('marginTop','0');
}
});
I have found this simple javascript snippet very useful.
$(document).ready(function()
{
var navbar = $('#navbar');
navbar.after('<div id="more-div" style="height: ' + navbar.outerHeight(true) + 'px" class="hidden"></div>');
var afternavbar = $('#more-div');
var abovenavbar = $('#above-navbar');
$(window).on('scroll', function()
{
if ($(window).scrollTop() > abovenavbar.height())
{
navbar.addClass('navbar-fixed-top');
afternavbar.removeClass('hidden');
}
else
{
navbar.removeClass('navbar-fixed-top');
afternavbar.addClass('hidden');
}
});
});