How I made the navigation bar for this site
This tutorial covers how to make a simple navigation bar in just HTML and CSS—no JavaScript required! When viewed on wide screens, the list of nav links sits on the side of the page, but on mobile devices it scrunches to the top of the screen. This allows people to browse your site comfortably from any device!
Step 1: Wrap your whole site in <div class="content">
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 <nav> element
We could easily use a <div< instead of a <nav>, but <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.