How to Make a Fancy Navigation Bar
A navigation bar is a place where website users can control where they go on the website. It contains links to different portions of the website and is often designed to mesh well with the overall look of the website. The navigation bar is created using html and CSS coding. The html coding affects how the navigation bar functions. The CSS coding influences more of how the navigation bar looks.
Other People Are Reading
Instructions
-
-
1
Use web-building software to construct the skeleton of the website. Web building software uses a visual interface to build much of code that you need for the website, allowing you to focus more specifically on the aspects of the code that you customize.
-
2
Use an FTP client to access your website. The client will need your website URL, FTP address, username and password to access your website on the web host.
-
-
3
Locate the file that has ".css" at the end of the file extension. The CSS file you want to edit will say "<!DOCTYPE html PUBLIC" at the beginning. Here, you can make changes to the code to construct your navigation bar.
-
4
Find "#navbar ul {." Control, where the navigation bar is left, center or right aligned by changing the text after “text-align.”
-
5
Find “background-color:.” The number following this code indicates the background color. Change the number to change the background color to what you want.
-
6
Use a graphics program to create the more stylish aspects of the navigation bar. Many navigation bars have gradients that make them appear more 3-D and sleek. Create a rectangle that will represent the bar.
-
7
Place two different colors, one on top of the other, next to each other where the navigation bars are created. Place the gradient overlay effect on the two colors so they blend. Change the opacity of the layer the navigation bar is on so the background shows through a little bit and it looks more like the navigation bar is a part of the website.
-
8
Create a new layer. Draw lines that travel the opposite direction of the orientation of the navigation bar. For example, when the navigation bar travels horizontally, draw the lines vertically. Apply a gradient overlay effect on the lines. Save the file type as “png.”
-
9
Add the image files of navigation bar to the “images” folder on the server. Open the style.css. Locate the "#nav {" portion of the style.css and under "/*Primary Navigation."
-
10
Add the text “background: url(images/yourfile.png).” In the spot that says "yourfile," enter the name of the navigation bar you created.
-
11
Under "#nav li {," add "background: url(images/yourfile.png)" and add your file. Replace the file name already there with your file name in "background: url(images/nav-home.png)" under "#nav li.home a,." Continue replacing each bit of code containing a different file name with your file name. You are telling each visitor’s computer to load the image you created in the spot where the navigation bar links are located, giving them a stylish look.
-
1
