HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://use.typekit.net/yre6qbh.css");
</style>
</head>
<body>
<div class="navbar">
<div class="scappi-logo" href="#home">Scappi</div>
<div class="scappi-md" href="#home">Management Dashbaord</div>
<div class="user-btn" href="#logout">admin</div>
<div class="live-btn" href="#">Visit Your Site</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
CSS
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #242022;
position: fixed;
top: 0;
width: 100%;
height:66px;
padding: 18px 24px;
}
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
font-family: "europa";
padding: 20px 24px;
text-decoration: none;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
.scappi-logo {
color: #fff;
display: block;
padding: 20px 6px 20px 24px;
text-align: center;
float: left !important;
font-family: "europa";
font-weight: 700;
font-size: 22px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.scappi-md {
color: #fff;
display: block;
padding: 20px 24px 20px 0px;
text-align: center;
float: left;
font-family: "europa";
font-weight: 300;
font-size: 22px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.live-btn {
float: right;
display: block;
color: #f2f2f2;
cursor: pointer;
background: #42A7F8;
border-radius: 3px;
text-align: center;
font-family: "europa";
padding: 6px 12px;
margin: 18px 12px;
text-decoration: none;
font-size: 16px;
}
.live-btn:hover {
background: #0083D6;
}
.user-btn {
float: right;
display: block;
color: #f2f2f2;
cursor: pointer;
background: #42A7F8;
border-radius: 3px;
text-align: center;
font-family: "europa";
padding: 6px 12px;
margin: 18px 12px;
text-decoration: none;
font-size: 16px;
}
.user-btn:hover {
background: #27CB7C;
}
