This forum is now read-only. Please use our new forums at

346 points
Submitted by
Izzie McKenzie
over 5 years ago

How do I add a nav bar?

I've just been practicing my html/css skills and I thought making a basic website would help. I have a problem -how do I add a bar for navigation? And is there a way to create more than only one page? Here is my html/css
html-(I've removed all the </> from the html because it wouldn't show up otherwise)
link type="text/css" rel="stylesheet" href="stylesheet.css"/
div ID="header"KingJofferyGameOfThrones.Com/divdiv class="left"/divdiv class="right"/divdiv ID="bottom"/div
div ID="menu"
p Home About Contact Advertise /p


body {
background-color: lightgrey;
div {
border-radius: 5px;
#header {
font-family: Calibri;
font-size: 50px;
text-align: center;
#menu {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;

1 vote


In the future your code will show up if you enter it and then highlight it here and click the "{}" icon above to mark it as code.

To create a menu you will need to change your paragraph text into links using the <a></a> tag. The href= specifies the new HTML page you will need to create for the link to become valid.

<div ID="menu">
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
        <a href="advertise.html">Advertise</a>

If you would like to center the text vertically within your navigation bar you can do that by adding "line-height:50px;" under your #menu class.

737 points
Submitted by
Sean Jennings
over 5 years ago

1 Comment

5195240b2ff1a57196000056_249384371 Izzie McKenzie over 5 years ago

Thank you so much! And also thanks for the tip about the {} :D