Skip to content

Instantly share code, notes, and snippets.

@benweitzel

benweitzel/navbar.html

Last active November 1, 2024 20:25
Show Gist options
  • Save benweitzel/8621181 to your computer and use it in GitHub Desktop.
Save benweitzel/8621181 to your computer and use it in GitHub Desktop.
Download ZIP
A simple HTML and CSS navigation bar that is extremely easy to customize.
Raw
navbar.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="http://github.com">Link 1</a></li>
<li><a href="http://github.com">Link 2</a></li>
<li><a href="http://github.com">Link 3</a></li>
<li><a href="http://github.com">Link 4</a></li>
<li><a href="http://github.com">Link 5</a></li>
</ul>
</div>
</body>
</html>
@Tony-Shitan
Copy link

Thanks for this.. you just saved a project for me
But am trying to get the logo of the page to fit into the navbar, how do i go about doing that?

@RyanW2
Copy link

RyanW2 commented Jul 17, 2022

Love the help

@camarasidiki2003
Copy link

Very helpful. Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment