Skip to content

Instantly share code, notes, and snippets.

@YingCGooi

YingCGooi/Navigation Bar Example

Created February 20, 2018 13:53
Show Gist options
  • Save YingCGooi/2672e5173f390867e80436e5ecff8b92 to your computer and use it in GitHub Desktop.
Save YingCGooi/2672e5173f390867e80436e5ecff8b92 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Navigation Bar Example
<!doctype html>
<html lang="en-US">
<head>
<title>Nav Page</title>
<meta charset="UTF-8" />
<style>
body {
margin: 0;
padding: 0;
}
nav {
display: block;
height: 90px;
background-color: #CCC;
border: 1px solid #999;
}
img {
height: 100%;
padding: 10px;
display: inline-block;
box-sizing: border-box;
}
ul {
height: 100%;
margin: 0;
float: right;
display: inline-block;
width: 80%;
line-height: 100%;
text-align: right;
}
li {
height: 100%;
padding: 10px;
display: inline-block;
box-sizing: border-box;
line-height: 70px;
}
li a {
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<img src="free.png" alt="icon" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment