Skip to content

Instantly share code, notes, and snippets.

@AlanSimpsonMe
Last active April 11, 2018 13:02
Show Gist options
  • Save AlanSimpsonMe/d719ee5bcb74c2722b5e3f4db46a3f2a to your computer and use it in GitHub Desktop.
Save AlanSimpsonMe/d719ee5bcb74c2722b5e3f4db46a3f2a to your computer and use it in GitHub Desktop.
Simple Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Nav</title>
<!-- This is just for the font, and is optional. I'm using a Google Font -->
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
<style>
#wrapper {
width: 80%;
min-width: 800px;
max-width: 1280px;
margin: 1em auto;
}
nav {
width: 100%;
background-color:pink;
}
/* General look for the nav links */
/* The widths should total up to a little less than 100%, so they fill the width without wrapping to two lines */
nav a {
display: inline-block;
width: 16%;
text-align: center;
text-decoration: none;
font-size: 250%;
font-family: 'Amatic SC', cursive;
font-weight: bold;
}
/* Color for visited and unvisited links */
nav a:link,
nav a:visited {
color: black;
}
/* Color for link under the mouse pointer */
nav a:hover,
nav a:active {
color: lime;
}
article {
margin: 2em 0;
font-size: 120%;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Here is the nav bar. In real life each would point to a different page within the site -->
<nav>
<a href="index.html">HOME</a>
<a href="index.html">THE STUDIO</a>
<a href="index.html">CLASSES</a>
<a href="index.html">TIMETABLE</a>
<a href="index.html">PRICING</a>
<a href="index.html">CONTACT</a>
</nav>
<article>
The links above are fake in the sense that they all take you to this page. They're just to demonstrate how the link changes
color when you point to it. That's handed by an a:hover{} style rule.
</article>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment