How I made the navigation bar for this site
Step 1: Wrap your whole site in
This will make it much easier to push all the existing stuff on the page over to the right to make room for the vertical navbar.
The resulting HTML code should look something like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My awesome site</title> <!-- The style.css file allows you to change the look of your web pages. If you include the next line in all your web pages, they will all share the same look. This makes it easier to make new pages for your site. --> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div class="content"> <!-- all the actual content of the page goes here now... --> </div> </body> </html>
Step 2: Add a
We could easily use a
<div< instead of a
<nav> makes it easier for people with screen readers to navigate the site.
We'll add the nav element at the top of the
<body>, above the
<div class="content">. This will make it show up at the top of the screen in mobile browsers.