Create a fixed task-bar with CSS & HTML

05.12.2014 by Ilia Raiskin

HTML CSS Design

This tutorial shows you a pretty basic way to create fixed task-bars with HTML and CSS. Note that I only included the codes for the task bar here. You can see the rest in the downloadable file.

Demo Download

Font

This time I decided to go with the Roboto font from Google Fonts.

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>

HTML

<div class="task-bar">
 <div class="inner-task">
  <div class="task-head">Fixed task-bar</div>
  <ul class="main-menu">
   <li>
    <a href="#">Home</a>
   </li>
   <li>
    <a href="#">About</a>
   </li>
   <li>
    <a href="#">Contact</a>
   </li>
   <br style="clear:both;" />
  </ul>
 </div>
 </div>

CSS (only bar & menu)

div.task-bar {
background: white;
position: fixed;
width: 100%;
top: 0;
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04);
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04);
}

div.inner-task {
max-width: 800px;
margin: 0 auto;
}

ul.main-menu {
list-style: none;
list-style-type: none;
padding: 0;
}

.main-menu li {
float: left;
}

.main-menu a {
color: rgb(61, 61, 61);
text-decoration: none;
display: block;
padding: 15px 35px;
font-weight: 400;
font-size: 90%;
text-transform: uppercase;
}

.main-menu a:hover {
color: rgb(0, 173, 255);
}

ul.main-menu {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
margin: 14px 0px;
}

div.task-head {
float: left;
padding: 15px;
margin: 14px 40px 14px 0px;
font-size: 90%;
font-weight: 400;
color: rgb(0, 174, 230);
}

Note that it's important to use box-shadows or borders to create a good separation between the content and the task-bar.

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.

Create a fixed task-bar with CSS & HTML

Font

HTML

CSS (only bar & menu)

About the author

Ilia Raiskin

Did you like this post? Any feedback is highly appreciated. Feel free to leave a comment.

Follow & Subscribe

About us

Info