Responsive Navigation Bar | Html CSS and JS | Legenddocx Creation |

Irfan Hussain
May 14, 2020
Responsive Navigation Bar | Html CSS and JS | Legenddocx Creation |

Responsive Navigation Bar | Html CSS and JS |

You can easily create a sticky or fixed header and footer using the HTML CSS and Some javascript. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.


Download Now

Let's take a look at the following example to understand how it basically works:
HTML
<html>
<head>
</head>
<body>
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>Home</li>
</a>
<a href="#" class="menu-link">
<li>Portfolio</li>
</a>
<a href="#" class="menu-link">
<li>Technology</li>
</a>
<a href="#" class="menu-link">
<li>Contact</li>
</a>
<a href="#" class="menu-link">
<li>About</li>
</a>
</ul>
</nav>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="menu-opener.js"></script>

<script>
$(".menu-opener").click(function() {
$(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
</script>

</body>

</html>

 CSS
<style>
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: url("../ba.jpg") no-repeat;
background-size: 2000px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

a {
display: block;
width: 100%;
height: 100%;
}

.menu-opener,
.menu-opener:hover,
.menu-opener.active,
.menu-opener-inner,
.menu-opener-inner::before,
.menu-opener-inner::after,
.menu,
.menu.active {
-webkit-transition: 250ms all;
transition: 250ms all;
}

.menu-opener {
cursor: pointer;
height: 64px;
position: absolute;
top: 2%;
left: 1%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 64px;
}

.menu-opener:hover,
.menu-opener.active {
background: #f1c40f;
}

.menu-opener-inner {
background: #fff;
height: .5rem;
margin-left: .75rem;
margin-top: 1.75rem;
width: 2.5rem;
}

.menu-opener-inner::before,
.menu-opener-inner::after {
background: white;
content: '';
display: block;
height: .5rem;
width: 2.5rem;
}

.menu-opener-inner::before {
-webkit-transform: translateY(-0.75rem);
-ms-transform: translateY(-0.75rem);
transform: translateY(-0.75rem);
}

.menu-opener-inner::after {
-webkit-transform: translateY(0.25rem);
-ms-transform: translateY(0.25rem);
transform: translateY(0.25rem);
}

.menu-opener-inner.active {
background: transparent;
}

.menu-opener-inner.active::before {
-webkit-transform: translateY(0rem) rotate(-45deg);
-ms-transform: translateY(0rem) rotate(-45deg);
transform: translateY(0rem) rotate(-45deg);
}

.menu-opener-inner.active::after {
-webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
-ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
}

.menu {
background: #f1c40f;
color: transparent;
height: 64px;
position: absolute;
top: 2%;
left: 1%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 0rem;
z-index: -1;
}

.menu.active {
width: -webkit-calc(100% - 2rem);
width: calc(100% - 2rem);
}

.menu.active .menu-link {
color: white;
}

.menu-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
height: 100%;
list-style-type: none;
margin: 0;
margin-left: 4rem;
padding: 0;
}

.menu-link {
color: transparent;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
font-size: 2rem;
font-weight: 100;
height: 100%;
text-align: center;
text-decoration: none;
}

.menu-link li {
margin: auto;
}

@media screen and (max-width: 768px) {
.menu {
height: auto;
}

.menu-inner {
display: block;
}

.menu-link {
padding: 10px 0;
font-size: 1.2em;
}

.menu.active {
width: -webkit-calc(100% - 0.5rem);
width: calc(100% - 0.5rem);
}
}


</style>