i want to make top fixed navbar like w3school.com? when i scroll down, the top navbar will fixed and the logo are not. how to do that with using bootstrap css framewok? is that only can use with w3.css ? i doubt about it. thank you!
#logo {
text-align: center;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="logo">
<img src="http://lorempicsum.com/futurama/350/200/1"/>
</div>
<div id="nav">
<ul class="nav nav-tabs navbar-fixed-top">
<li><a href="...">Fixed</a></li>
<li><a href="...">Fixed</a></li>
<li><a href="...">Fixed</a></li>
<li><a href="...">Fixed</a></li>
<li><a href="...">Fixed</a></li>
<li><a href="...">Fixed</a></li>
</ul>
</div>
<p> i want the navbar fixed like w3school.com when it the scroll down until reach the image the navbar will fixed. sorry for bad english. visit w3school to see the navbar fixed top </p>
This is what u want:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Navbar like w3schools</title>
<script>
jQuery(document).ready(function($) {
// Fixa navbar ao ultrapassa-lo
var navbar = $('#navbar-main'),
distance = navbar.offset().top,
$window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
navbar.removeClass('navbar-fixed-top').addClass('navbar-fixed-top');
$("body").css("padding-top", "70px");
} else {
navbar.removeClass('navbar-fixed-top');
$("body").css("padding-top", "0px");
}
});
});
</script>
<style>
@media screen and (max-width: 768px){
.man{
display:none;
}
}
body { overflow-x: hidden;}
</style>
</head>
<body>
<div class="row">
<div style="font-weight:bold;font-size:35px;font-family:cursive;padding:5px;left:15px" class="col-xs-12 col-sm-offset-1 col-sm-4">w3schools<span style="color:green">.com</span></div>
<div style="font-weight:lighter;font-size:25px;padding:5px;top:12px" class="man col-xs-12 col-sm-offset-1 col-sm-6">The world's largest web developer site</div>
</div>
<nav id="navbar-main" class="navbar navbar-inverse">
<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" 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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<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>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<main class="container">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p>
</main>
</body>
</html>
