Learn Adsense, SEO, Digital Marketing, Game Hacks & Online Money Making tips.

Thursday, 29 August 2013

How to add a fixed header like Facebook and Mashable on your website - Part 1

22:12 Posted by kashyap bhansali , , , , No comments
To learn to build a cool website from scratch you can follow this series of blog posts by Subscribing to our blog feed .

You will learn to build a Fixed header like on our website , means even though you scroll the top bar / header remains fixed in the top position . 

Prerequisites - HTML & CSS .

Basic knowledge in both HTML and CSS is required .

For Best Results use Google Chrome .. as experience might differ with different web browsers.

website having fixed header

Following is the code you can use :

HTML Code :

<link rel="stylesheet" type="text/css" href="style.css">
<div class="fixedheader">
<p class="top">Hello</p>
<div class="nav">
<a href=''>Home</a>&nbsp;&nbsp;
<a href=''>Register</a>
<div class="container">
<div class="main">

CSS Code:

background: black;
position: fixed;
width: 100%;
z-index: 999;
top: 0;
height: 50px;
opacity: 1;

font-family: comic sans ms;
color: red;
font-size: 24px ;
float: left;
margin-top: 5px;
padding-left: 20px;
width: 100%;
//background-color: blue;
//background: url(images.jpg) repeat bottom;

margin-top: 7px;
width: 400px;
float: right;
text-align: left;
font-size: 24px;


color: #ccc;
font-family: "lato",Helvetica,Arial,sans-serif;
text-decoration: none;
font-size: 1em;
font-weight: bold;

body {
margin: 0;
padding: 0;
width: 100%;
background-color: transparent;
font-family: "lato",Helvetica,Arial,sans-serif;
font-size: 1em;
color: #575757;
//background: url(images.jpg) repeat bottom;

background-color: black;
border-radius: 30px;
width: 90%;
height: 700px;
padding: 20px;


Do subscribe to our RSS feed . To Register enter your email address in the right sidebar to Stay Updated on How to Build a Cool E-commerce Website from Scrath. 

Advertise on TechBum™ ?


Post a Comment

What do you think? We would love to know your views...