Create topnav with css flexbox less code 2019

CSS ( Cascading Style Sheet ) is the style sheet language which used to style the mark up language written in HTML. It can be used with HTML, JAVASCRIPT as well as JQUERY. It is used for creating stylish web pages, applications.

It is used for styling the HTML pages and content such as Container, Header, Menu, Sidebar, Wrappers, Footers, etc. Sjmply to say CSS will provide you the way of changes to your HTML as your wish.

Css flexbox topnav
Css flexbox Menu


In this post we will discuss about How to create Responsive Topnav Menu with Css Flexbox? . If you like to create dynamic menu for your website , look the tutorial and codes written in CSS below.


#HTML : First of all, You need to write html code. You can see the code below in the block where we will use Logo, Menu and Search Icon in menu topnav.



<div class="topnav">
<div class="navigation">
<div class="nav">
<!--bars-->
<div class="bars" id="bars">
<span class="fa fa-bars"/>
</div>
<!--Logo-->
<div class="logo">
<img src="image-src" name="image" alt="logo-image"/>
</div>
<!--menus-->
<div class="link" id="link">
<a href="">Home </a>
<a href="">Contact</a>
<a href="">About</a>
<a href="">Sitemap </a>
<a href="">Deals </div>
</div>
<div class="search-icon">
<span class="fa fa-search"/>
</div>
</div>
</div>
</div>



#CSS : Add the following css which will style your html and give another look. Following is the Css flexbox, and we are not going to use float left, right etc.


<style>
.topnav {
background : #2475fc;
box-sizing :border-box; 
}
.nav {
width:100%;
max-width :1100px;
margin:0 auto;
padding: 0 10px;
display : flex; 
justify-content : space-between; 
align-items : center; 
height :60px
}
.bars {
padding:10px;
display:none; /* hide bar in desktop */
}
.bars span {
font-size :23px;
color:#fff
} 
.logo img {
width:200px ; /* set as your image logo */
height: auto;
padding: 0;
}
.link {}
.link a {
display : block; 
text-decoration : none; 
color : #fff; 
text-transform : uppercase; 
padding:12px;
}
.search-icon {}
.search-icon span {
font-size:23px;
color:#fff; 
}
</style>

If you add the css code correctly then your topnav looks like similar to following screenshot. 



Css flexbox topnav



#Media Query : You can add media query to make it responsive. You can set media query point to point for small screens. Here how you can do that.




<style>
@media screen and (max-width:768px){
.bars {display :block;} /* display bars to toggle links */
.link {
/* add your own css how to make it responsive */
position :absolute; 
left:0;
top:60px;
width:100%;
box-sizing : border-box; 
background :#311b92;
transition : 0.5s ease;
overflow :hidden;
max-height :0px; /* will toggle clicking on bars */
}
.toggle .link {max-height :25rem} /* toggle it clickin gon bars with js */
.link a { 
display : block; 
text-align : left; 
} 
</style>


# Function : Now, add the function to yout link to toggle it in mobile screen, here is the way how you can do it, with jquery.


<script>
//add function 
$(".bars").click(function(){
$(".topnav").toggleClass("toggle");
});
// You can make same function for Search
// if your click on search icon display search box, You can
// make another search box and toggle it.
</script>


# FontAwesome : You must add Jquery library and FontAwesome script on the <head> tag, copy and paste it in the head.



// Fontawesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

// Jquery 

<script src​=​"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"​<>/​script​>


This is how you can make responsive topnav with css flexbox with less CSS code. if you really didn't understand or got confused with this, you can contact us.

Post a comment

0 Comments