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.
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.
I'm trying to put together a page that has a Header, navigation tabs that float over the bottom of the header, body content and then a footer. This should be fairly easy, but I'm running into a strange result.
The menu has to float over the header image, as that image may be static, or it may be a slider... or it may be an embedded Google map.
I've mocked up the code below and essentially the CSS for it. The problem is that even though I have the footer set to the bottom, when I view the page and the body has enough content, the footer seems to be floating over the body content and the body content extends past the bottom of the footer.
Here is my code.
Would appreciate someone smarter than me looking at this and making any suggestions.
<style>
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
.mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
}
.mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
z-index: 100;
color: #fff;
margin-top: 310px;
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
.mynavigation li.is-active {
color: #474747;
background-color: #fff;
}
.mynavigation li a{
color: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
</style>
<div id="header">
<img src="/images/myimage" />
</div>
<div id="mynavigation">
<!-- css makes this a tab menu and it needs to position at the bottom of the image <div> -->
<!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together -->
<ul>
<li>Home</li>
<li>Examples</li>
<li>Other</li>
<li>Last</li>
</ul>
</div>
<div id="bodycontent">
<!-- page content goes here and has a white background -->
</div>
<div id="footer">
<!-- footer content here -->
</div>
Working Fiddle http://jsfiddle.net/u2qL4j8a/2/ You had wrongly mentioned the CSS selector for navigation and footer as classes whereas in the HTML you have mentioned these as IDs.
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
#mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
position: fixed;
top: 0;
left: 0;
}
#mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
/*z-index: 100;
color: #fff;
margin-top: 310px;*/
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
Make your HTML structure like so:
<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="mynavigation"></div>
<div id="content">
<!-- CONTENT STUFF -->
</div>
<div id="footer"><!-- FOOTER STUFF --></div>
</body>
</html>
...And your CSS like so:
html{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#mynavigation{
position: absolute;
top: 350px;
height: 50px;
width: 100%;
}
#content{
position: absolute;
top: 350px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
the html menu that i have inserted into the page through SSI is stretching to the left beyond the hard coded width of the page and i can't figure out why...
if you look at my code, the #menu id is the problem as it is floating properly (float:right;) but the width it seem is being overridden by something....and i can't find out what is overriding it.....i've checked all the properties that would affect #menu but nothing has an effect on it...
here is the webpage where it is clear: http://unifiedforunifat.com/redesign/homepage.html
here is the css for the homepage where the menu is insert:
body{
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-top: 10px;
}
html{
height: 100%;
}
#wrapper{
width: 900px;
min-height: 100%;
height: auto;
margin: 0 auto -4em;
}
#header{
position: relative;
top: 0;
left: 0;
margin-bottom: 1px;
}
here is the corresponding html:
<body>
<div id="wrapper">
<div id="header">
<!--#include virtual="/menus/menu.html" -->
</div>
here is the css for the menu page:
#menu-wrapper{
position: relative;
width: 900px;
margin: 0 auto;
height: 140px;
}
#logo{
background:url('http://www.unifiedforuganda.com/resources/u4ulogo.jpg') no-repeat;
height: 108px;
width: 200px;
position: relative;
top: 3px;
background-position: 0 0;
float: left;
}
#logo span{
position: absolute;
top:0; left:0; bottom:0; right:0;
background:url('file:///Volumes/Despotos/Users/nojohnny101/Documents/Dropbox/Unified%20for%20UNIFAT/website/resources/u4ulogo.jpg') no-repeat;
background-position: -200px 0;
}
#logo:hover span{
opacity: 1;
}
.social{
position: relative;
margin: 50px 0 0 0;
width: 136px;
float: right;
overflow: hidden;
display: block;
}
#menu{
position: relative;
top: 0;
right: 0;
list-style: none;
display: block;
overflow: hidden;
width: 100%;
margin-top: 0;
padding-top: 4px;
border-top: 1px solid black;
float: right;
}
then here is the html for the menu page:
<div id="menu-wrapper">
<div class="menu-header">
<span></span>
</div>
<div class="social">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<ul id="menu">
<li class="active">DONATE</li>
<li class="active">ABOUT US</li>
<li class="active">MEDIA</li>
<li class="active">US MOVEMENT</li>
<li class="active">UGANDA PROGRAMS</li>
</ul>
</div>
any help would be truly appreciated!
so i found the answer...what i ended up doing was put the overflow: hidden; property on the #menu-wrapper id....i don't know if i totally understand why this helped to hide the extra width to the left of the page even though a hard width was specified (900px) and the border is actually applied to the #menu id not the #menu-wrapper id.....
but problem....thanks #MrLister
For some reason I'm getting a top margin of about 10px above my header bar in Firefox, but not in Chrome. This doesn't effect the main body, just the fixed header bar. If I remove the position: fixed; then there is no gap, but then it is no longer fixed.
Gap marked in red:
body {
margin: 0px;
}
#topbar {
width: 100%;
height: 50px;
background-color: #F0F0F0;
margin: 0px;
padding: 0px;
position: fixed;
z-index: 10000;
}
#topbar .header {
display: inline-block;
font-size: 35;
color: darkgrey;
margin-top: 5px;
}
<body>
<div id="topbar">
<div class="header">
Header
</div>
<div class="nav_item">
<button class="nav_icon"></button>
<nav>
Home
Item 1
Item 2
Logout
</nav>
</div>
</div>
Add following css:
#topbar {
top: 0;
}