HTML / CSS 

Use our online code editor for free. launch editor >>

Responsive navbar.

HTML CSS/09-2021/Responsive-navbar

code:-



Navbar will toggle between different screen sizes, if you want to see how these works then try to resize your window or tab. Here we are using @media screen function to toggle between different screen sizes, If the screen size is below 786px then the navbar menu will be hidden and if the screen size is above 786px then you can see the full flex navbar menu.

We are also using attributes like overflow hidden, overlays and etc to make it look good. 

Here is full code.
code- 


<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>Responsive Navigation Bar</title>
</head>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
header {
width: 100%;
height: 70px;
line-height: 70px;
text-align: center;
font-family: sans-serif;
background-color: #e065e6;
}
.brand {
font-size: 1.4rem;
color: #fff;
width: auto;
height: 100%;
float: left;
margin: 0 0 0 5%;
cursor: pointer;
}

.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.menu {
color: #fff;
cursor: pointer;
width: 60%;
height: 100%;
float: right;
}
.menu ul {
width: 100%;
height: inherit;
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.menu ul a {
width: 20%;
height: inherit;
color: #fff;
display: inline-block;
}
.menu ul a:hover {
background-color: #e085e6;
color: #fff;
}
#menuToggle {
display: none;
}
.menu-icon {
display: none;
}
@media screen and (max-width: 768px) {
.menu {
width: 100%;
height: auto;
}
.menu ul {
display: block;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
-ms-transition: max-height 0.3s;
-o-transition: max-height 0.3s;
transition: max-height 0.3s;
}
.menu ul a {
text-align: left;
width: 100%;
height: 50px;
background-color: #e065e6;
padding: 1px 0px 20px 5%;
}
.menu-icon {
cursor: pointer;
width: 70px;
height: inherit;
display: block;
position: absolute;
top: 0.3%;
right: 0;
}
#menuToggle:checked ~ ul {
max-height: 350px;
}
.menu-icon i {
font-size: 1.7rem;
}
}
</style>
<body>
<header>
<figure class="brand">LOGO</figure>
<nav class="menu">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon"><i class="fa fa-bars"></i></label>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Likenull</li></a>
<a href="#"><li>About Us</li></a>
<a href="#"><li>Contact Us</li></a>
<a href="#"><li>Terms</li></a>
</ul>
</nav>
</header>
<center>
<h1> Resize me to toogle responsive bar.</h1>
</center>
</body>
</html>



Share this Page!

Atul kumar singh

Web Developer, blogger, chief editor. Telling and discovering the world of tech. Known as like null, and loves tech. 

Atul Kumar Singh

Author / CEO

Browse our featured topics

© Copyright 2022 codelikenull. All Rights Reserved.