Create Responsive Nav Bar
Create Responsive Nav Bar. In this article we will step into on how to create a responsive nav bar .
In order to Create a Nav Bar you will need to Code
- HTML
- CSS,
- JavaScript.
To make the nav bar responsive we will need media queries in CSS
Follow the Step by Step below on how to Create Responsive Nav Bar
- Create an un-order list under the the <nav></nav> tag. What is javascript . void
- Create a Class for your Un-order list, and a separate class for the Signup and Sign in as i want the (Signup / Sign in) to float on the right,create a class for the unicode symbol Check out Unicode
- Set Up Basic Styling in CSS to segregate nav bar /header / footer into block . Set Margin 0 in Body so that there will be no gap spacing in between.Set up line-height value to reflect the spacing between each text line Check out whatis “Display:block;” here.
- Set Up the Basic Styling for the Un order list and the order list.Provide a Background Colour to your Nav Bar , set width margin, set overflow to hidden . To remove the underline highlight at your href tag ,set list-style to none , set the position for all link text in your navbar to left side. Check out here to learn what is ” overflow:hidden;”
- There are one Exception ,where the “Sign Up and Sign In “href link which i would want it to stay on the Right Hand side. select the class element and set float to right
- Select the un order list, list , ahref element and style the text height , colour ,padding for all object contains inside these element
- Create a Hovering Effect, when a mouse cursor hover around the ahref link it will change the background color and the text colour
- Hide the Unicode Symbol when it is in Full desktop width
- Create Media Query to make your Nav bar mobile responsive. This Media Query means, when the size of the browser reduce to mobile size , display none of the item in the un order list except the first Child item in the un order list which appears to be “Home ” href.
- When the Size of the browser reduce towards Mobile Size , you would want to Display the Unicode Symbol.
- Now is the step to embed the JavaScript into the HTML Code, so when the “Unicide ” text is being click and it is under the mobile Width mode, we are able to switch the class Styling from the desktop mode under the class name of “topnav” to class “topnav.responsive ” (mobile width mode). Basically the code below means , when the unicode is being click and if the current class equal to topnav , concatenate the class topnav into taopnav.responsive , else if it is not click maintain the current class value which happens to be “topnav”
- As mentioned the step above , when the ” unicode” is being click we are able to Switch the Styling Class property from “topnav” to “topnav.responsive” . Input new Styling for “topnav.responsive” .The First thing which we might want to do and show in the first line of code below, is to fix the unicode text on top of everything.all the Code below should be coded inside the Media Query bracket. Check out What is ” Position:absolute; “
<nav>
<ul class="" id="Clickdropdown">
<li><a href="#home">home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>
<li class=""><a href="#SignUp">Sign Up</a></li>
<li class=""><a href="#SignIn">Sign In</a></li>
<li class="" onclick="dropdownMenu()"><a href="javascript:void(0);">☲</a></li>
</ul>
</nav>
<nav>
<ul class="topnav responsive" id="Clickdropdown">
<li><a href="#home">home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>
<li class="topnavright"><a href="#SignUp">Sign Up</a></li>
<li class="topnavright"><a href="#SignIn">Sign In</a></li>
<li class="dropdownSymbol" onclick="dropdownMenu()"><a href="javascript:void(0);">☲</a></li>
</ul>
</nav>
nav,
header,
footer{
display:block;
}
body{
line-height: 1;
margin:0;
}
nav{
width: 100%;
margin:0;
}
nav ul{
background-color: #eee;
overflow:hidden;
margin:0;
padding: 0;
}
ul.topnav li {
list-style:none;
float:left
}
ul.topnav li.topnavright {
float: right;
}
ul.topnav li a{
display:block;
text-decoration: none;
min-height: 16px;
text-align:center;
padding:14px;
text-transform: uppercase;
Color: #666;
}
ul.topnav li a:hover{
background-color:#0080ff;
color:#fff;
}
ul.topnav li.dropdownSymbol{
display: none;
}
@media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
@media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
ul.topnav li.dropdownSymbol{
display: block;
float: right;
}
}
<script>
function dropdownMenu() {
var x = document.getElementById("Clickdropdown");
if (x.className === "topnav") {
x.className += " responsive";
}
else {
x.className = "topnav";
}
}
</script>
ul.topnav.responive li.dropdownSymbol{
position:absolute;
top:0;
right: 0;
}
ul.topnav.responsive{
position:relative;
}
ul.topnav.responsive li{
display:inline;
float:none;
}
ul.topnav.responsive li a{
dsiplay:block;
text-align:Left;
}
Well that wrap up on how to Create Responsive Nav Bar check out how to create rows and column in CSS here
Leave a Reply