Navigation bar is where we will put our blog’s important links such as about, contact, gallery, and more. And I love a navigation bar when it’s above the header image, like this blog’s. I used 100% CSS to made it, and it’s not hard at all. Even, we can make it more beautiful with the transparent background effect on it.
At before, my navigation links were located under the header image. But it looks so weird when I use the splashing wave pic above it. And I started to play with the codes to move the navigation links.
As you see in this pic, the background is transparent black, and the main text color is grey. When you point the cursor to the one of the text, the color of the text will be changed into white and with dotted underline.
Okay, now let’s we play with the CSS. It’s not hard, don’t be confused..
.navilinks {
overflow: hidden;
float: right;
width: 440px;
height: 30px;
border: none;
margin-top: 70px;
margin-right: 30px;
padding-top: 8px;
background: #000;
opacity: 0.7;
line-height: 20px;
color: #c7c7c7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
.navilinks a {
color: #c7c7c7;
font-size: 20px;
font-weight: bold;
font-family: Arial, Calibri, sans-serif;
text-transform: undercase;
}
}
That’s the main CSS of my navigation bar. It’s kinda long ya, hahahaha. Start from float, float right will make the position of the navigation links to the right side of the header, can be changed into left for left-floating. Margin and padding, I think I don’t need to explain more about it, you should know how to set the best margin and padding first. #000 is the color hex of 100% black, for the best transparency effect, I recommend to use black as the background. Next we will start to set the transparency of the background. opacity, I use 0.7 to make it like that, larger number will be more transparent.
Then color, it’s the main text color don’t use white on it, using white will make the transparency effect kinda worse. Use grey on it, #c7c7c7 is my grey color choice. Border radius, you can make rounded corner of the bar with this code. 3px is the radius of the rounded corner, can be changed into larger number for more rounded effect. But, make sure you have write down -moz-border-radius, -webkit-border-radius, and khtml-border-radius with the same amount of the number. Every browser has its own CSS reader, and -moz is for Firefox, -webkit for Chrome, but sorry I don’t know khtml what for.
Okay you’ve knew the main CSS of the navigation bar, so next we will move to the hover effect. Hover effect will apply when you point your cursor to the target. Started with the main code then add :hover after it with no spacing. It means, for the hover effect for the main CSS will be .navilinks a:hover. Why there’s an a? a is link, the hover effect is applied on the links (text) right?
For the hover effect, I apply color-change, and dotted underline, although it’s not a true underline, it’s border-bottom.
.navilinks a:hover {
text-decoration: none;
color: #fff;
border-bottom: 1px dotted #fff;
}
Set the text decoration to none, for removing the main a style of the header. If the main color is grey, for the hover I use white, so it will look like glowing effect. Then border-bottom to dotted, it will be dotted underline. It also can be changed with solid for solid line, dashed for dashed line. Yeah, now the hover effect is also done, that’s all of it! If you’re trying to install this CSS, make sure you’ve been choosen the correct selector. And remember! The hover effect is applied to the a (links) not to the navigation bar!
