Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick
/* HEADER */
<div class="headercss">
<div class="headerlogo">
</div>
</div>
/* BODY */
body {
margin: 0px;
height: 2000px;
}
.headercss {
width: auto;
height: 320px;
position: relative;
}
.headerlogo {
width: auto;
height: 250px;
position: relative;
}
.nav {
width: auto;
height: 70px;
position: relative;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float:left;
width:100%;
overflow: hidden;
}
li {
float: left;
width:25%;
min-width: 243px;
overflow: hidden;
}
a:link, a:visited {
display: block;
height: 68px;
min-width: 243px;
overflow: hidden;
}
a:hover, a:active {
}
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
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;
}
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>Nav Bar</li>
<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>
add to your .nav css block the
position: fixed
and it will work
I hope this can help someone. Determine the nav offset through js and then apply sticky position css to nav:
But first, we will define the styles in the stylesheet, like so.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
Then, we will apply that class to the navigation conditionally with jQuery.
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
Just use z-index CSS property as described in the highest liked answer and the nav bar will stick to the top.
Example:
<div class="navigation">
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
.navigation {
/* fixed keyword is fine too */
position: sticky;
top: 0;
z-index: 100;
/* z-index works pretty much like a layer:
the higher the z-index value, the greater
it will allow the navigation tag to stay on top
of other tags */
}
CSS:
.headercss {
width: 100%;
height: 320px;
background-color: #000000;
position: fixed;
}
Attribute position: fixed will keep it stuck, while other content will be scrollable. Don't forget to set width:100% to make it fill fully to the right.
Example
Give headercss position fixed.
.headercss {
width: 100%;
height: 320px;
background-color: #000000;
position: fixed;
top:0
}
Then give the content container a 320px padding-top, so it doesn't get behind the header.
You can do it with CSS only by creating your menu twice. It's not ideal but it gives you the opportunity have a different design for the menu once it's on top and you'll have nothing else than CSS, no jquery.
Here is an example with DIV (you can of course change it to NAV if you prefer):
<div id="hiddenmenu">
THIS IS MY HIDDEN MENU
</div>
<div id="header">
Here is my header with a lot of text and my main menu
</div>
<div id="body">
MY BODY
</div>
And then have the following CSS:
#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
}
#header {
top: 0;
position:absolute;
z-index:2;
}
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
}
Here is a fiddle for you to see: https://jsfiddle.net/brghtk4z/1/
/* Add css in your style */
.sticky-header {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
transition: 0.3s;
}
/* and use this javascript code: */
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > ) {
$('.headercss').addClass('sticky-header');
} else{
$('.headercss').removeClass('sticky-header');
}
});
});
I would recommend to use Bootstrap. http://getbootstrap.com/. This approach is very straight-forward and light weight.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-fixed-top">
<li> <br>BLINK</li>
<li><br>ADVERTISING WITH BLINK</li>
<li><br>EDUCATING WITH BLINK</li>
<li><br>ABOUT US</li>
</ul>
</div>
</div>
</div>
You need to include the Bootstrap into your project, which will include the necessary scripts and styles. Then just call the class 'navbar-fixed-top'. This will do the trick. See above example
Just Call this code and call it to your nave bar for sticky navbar
.sticky {
/*css for stickey navbar*/
position: sticky;
top: 0;
z-index: 100;
}
To make header sticky, first you have to give position: fixed; for header in css. Then you can adjust width and height etc. I would highly recommand to follow this article. How to create a sticky website header
Here is code as well to work around on header to make it sticky.
header {
position: fixed;
right: 0;
left: 0;
z-index: 999;
}
This code above will go inside your styles.css file.
Related
I am trying to make a div position: sticky; but it doesn't work, here's my code:
body {
height: 1000px;
}
header {
position: absolute;
width: 100%;
z-index: 100;
}
.top-navbar {
height: 100px;
background-color: green;
}
nav {
position: -webkit-sticky !important;
position: sticky;
top: 0;
align-self: flex-start;
background-color: orange;
}
<header>
<div class="top-navbar">
<h2>top navbar</h2>
</div>
<nav>
<h1>My navbar</h1>
</nav>
</header>
Temani has a great solution, but I wanted to point out the reason your solution isn't working. Position sticky is "relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor)". In your case, that's the header, and the nav is already stuck to it. However, if you move the nav below the header (as in the example below), you'll see it works:
body {
height: 1000px;
}
.top-navbar {
height: 100px;
background-color: green;
}
nav {
position: sticky;
top: 0;
background-color: orange;
}
<header>
<div class="top-navbar">
<h2>top navbar</h2>
</div>
</header>
<nav>
<h1>My navbar</h1>
</nav>
it seems you only want to keep the nav visible on scroll. In this case do it like below. Move sticky to header and consider a negative value for top equal to the height of top-navbar
body {
height: 1000px;
}
header {
position: sticky;
top: -100px;
}
.top-navbar {
height: 100px;
background-color: green;
}
nav {
background-color: orange;
}
h1,h2 {
margin:0;
}
<header>
<div class="top-navbar">
<h2>top navbar</h2>
</div>
<nav>
<h1>My navbar</h1>
</nav>
</header>
Whenever I set my navbar to fixed and my header height is 100vh, my header seems to be under the navbar. How can I make the navbar not cover my header and make header 100vh
.nav {
height: 80px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: red;
}
.hero {
background: blue;
height: 100vh;
margin-top: 80px;
}
* {
margin: 0;
}
<div class="nav">
</div>
<div class="hero">
</div>
Use position: sticky instead of position: fixed. This way your main container will always be 100vh.
In css I made edits.
* {
margin: 0;
}
.nav {
height: 80px;
position: sticky;
top: 0;
/*left: 0;*/
width: 100%;
background: red;
}
.hero {
background: blue;
min-height: 100vh;
/*margin-top: 80px;*/
}
<div class="nav">
</div>
<div class="hero">
</div>
Try setting the nav to position:sticky; instead
example: https://jsfiddle.net/sq5ae3u1/
I am working on a new version of a layout for one of my current websites. I have set up the following example for as far as I have gotten: http://jsfiddle.net/ckdm1m7q/
html:
<body>
<nav><ul><li>Home</li></ul></nav>
<header>
<img src="http://rockstartemplate.com/headerdesign/banner_green.jpg" />
</header>
<div id="wrapper">
<section id="left_col"></section>
<section id="right_col"></section>
<main id="main_content">
</main>
</div>
<footer>
© blah blah
</footer>
</body>
css:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
nav {
position: fixed;
background: #000;
height:27px;
width: 100%;
}
nav ul, nav li {
margin: 0;
padding: 0;
}
nav li {
display: inline;
line-height: 27px;
}
nav a {
color: #fff;
display: block;
padding-left: 15px;
padding-right: 15px;
}
header img {
width: 100%;
max-width: 1024px;
display: block;
}
#wrapper {
position: relative;
top:0;
height: 100%;
}
#left_col {
position: absolute;
top: 0;
left: 0;
width: 240px;
bottom: 0;
background: #eee;
overflow:auto;
}
#right_col {
position: absolute;
top: 0;
right: 0;
width: 240px;
bottom: 0;
background: #eee;
overflow:auto;
}
#main_content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #666;
margin-left: 240px;
margin-right: 240px;
overflow:auto;
}
footer {
height:20px;
line-height:20px;
background: #000;
color: #fff;
}
I would like #left_col, #right_col and #main_content to only fill the viewport area available (100% - 27px - [header.height] - 20px) and be scrollable within that area.
This is difficult as the height of header will change on smaller resolutions.
Is this possible in pure html+css? And if so, how could I achieve it?
edit: To explain my aim a bit better:
#main_content needs to be scrollable without moving , #left_col, or #right_col.
#left_col and #right_col need to be scrollable individually, if they extend past the bottom of the viewport
footer can be moved to the bottom of #main_content if that makes things easier
header does not have to be visible upon scrolling down.
I made a three column layout for my web app where the two left columns form the menu and submenu and the third column is the main viewport. However, the second column (div) isn't scollable when the main viewport is scrollable even though it does show a scroll bar. What am I doing wrong?
<div id="container">
<div id="top" class="clearfix">
Header
</div>
<div id="container_menu">
<ul id="menu">
<li>Menu goes here</li>
</ul>
</div>
<div id="container_submenu">
<div id="submenu">
Submenu goes here
<strong>WHY WON'T THIS DIV SCROLL? (It is showing a scroll bar...)</strong><br />
FILLER<br />
</div>
</div>
<div id="main">
FILLER<br />
</div>
CSS
* {
margin: 0;
padding: 0;
}
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1;
/* For IE 6/7 (trigger hasLayout) */
}
body, td, th {
}
body {
background: #fff;
}
div#container {
min-width: 800px;
/*TODO*/
width: 100%;
}
div#top {
width: 100%;
height: 50px;
background: #000;
color: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 5;
}
/* MENU */
div#container_menu {
background: #666;
position: fixed;
left: 0;
top: 0;
width: 180px;
margin-right: -180px;
height: 100%;
}
ul#menu {
margin-top: 50px;
}
/* SUBMENU */
div#container_submenu {
z-index: -1;
background: #ebeef5;
color: #999;
position: fixed;
left: 180px;
top: 0;
width: 250px;
height: 100%;
margin-right: -250px;
height: 100%;
overflow: scroll;
}
div#submenu {
margin-top: 50px;
}
div#main {
margin-left:430px;
margin-top: 50px;
}
JS Fiddle with CSS
Your z-index on div#container_submenu is -1. The div is being put under the #container div (which is transparent) so you can see the #container_submenu div, but not actually target it. Make the z-index of div#container_submenu 0 and it will fix it.
It's occluded by the #main div. Just remove z-index: -1. http://jsfiddle.net/zephod/4xp2jj3a/
I have tried to make a site but when I create a nav its conflict with body. body .main css showing marigin top in nav menu. but I set this for body content
You can check here jsfiddle
Here is the css code
*{margin: 0;
padding: 0;}
nav .navigation {margin: 0;
padding: 0;
position: fixed;
background: #333;
z-index: 999;
width: 100%}
nav .navigation li{display: inline-block;
padding: 5px 10px;}
nav .navigation li a{text-decoration: none;
color: #e1e1e1;}
nav .navigation li a:hover{color: #EDEDED}
.main { margin-top: 30px; }
.slide{background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
padding: 30px;
}
Here is the html code
<nav>
<ul class="navigation">
<li data-slide='1'>slide1</li>
<li data-slide='2'>slide2</li>
<li data-slide='3'>slide3</li>
<li data-slide='4'>slide4</li>
</ul>
</nav>
<div class="main">
<div class='slide' id='slide1' data-slide='1' data-stellar-background-ratio='0.5'>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>welcome</h1>
</div>
</div>
</div>
</div>
</div>
It's because of the 'position: fixed' on the navbar. Change that margin-top: 30px to padding-top: 30px;
Generally when using position: fixed, you should specify the position instead of leaving it up to the browser to figure out where to place the element. It's quite unlikely that you'll want the browsers default position when using position: fixed, as you're forcing it to come out of the flow anyway.
For example, on your nav .navigation selector, add something like top: 0.
nav .navigation {
top: 0;
margin: 0;
padding: 0;
position: fixed;
background: #333;
z-index: 999;
width: 100%
}
Just replace the code :
nav .navigation {margin : 0;
padding: 0;
position: fixed;
background: #333;
z-index: 999;
width: 100%;
top:0;
}
I have update your js fiddle : **http://jsfiddle.net/JLjT2/6/.** Please check
it because u set the position:fix in ( nav .navigation)
delete fix property, and if you want nev's position fix, then add top:0px; in same class
see here
nav .navigation
{
margin: 0;
padding: 0;
position: fixed;
background: #333;
z-index: 999;
width: 100%;
top:0px;}