Monday, 18 March 2013

Simple Horizontal Nav bar

Hi there! This tutorial will show you how to simply make a nav bar right under your banner. Is really simple & easy to customize ! 
Go to Design & add a new gadget & choose HTML/Javascript put it under your banner gadget
Then write the links you want it to show.
And add <div id="navbar"> right before all links
Once you are sure of this (you can change them later of course) go to Customize, then Advanced & Add CSS 

there write the following

#navbar {
font-size: 20px; 
text-align: center;
background: #FBEFF2
}
#navbar a{
padding: 0 10px 0 10px; //space between letters
font-family: Century Gothic;
}
#navbar a:hover{
color: pink;
text-decoration: none;
It will look like mine! :

Edit what is in green however you want, you can take off the line of backgroud if you don't want it! & that's it! you now have a simple & cute nav bar (: 




No comments:

Post a Comment