* style the color and transform of the icon on hover */ Transition: 0.5s /* adding the transition to make it more attractive */ * set the size, height, width of the icon*/ Height: 40px /* changing the height of the icon */ Width: 40px /* changing the width of the icon */ * Style the icon inside the navigation bar */ * Style the links inside the navigation bar */ Padding: 20px 0 /* Adding some padding */īackground: #fff /* Add a white background color to the top navigation */ĭisplay: flex /* flex Set navigation bar horizontally using the display tag*/īorder-radius: 10px /* add the border radius */ Position:absolute /* set the position of the navigation bar*/
Css3 menu icon nav code#
Next, we will complete our CSS file code to apply style of the HTML and make it more attractive and beautiful.ĬSS code: /* Add a sky blue background color to the body background */įont-family: sans-serif /* we can change font style by using the font-familiy css tag */īackground: aqua /* you can change the background color of body using background css tag */ Next, we will create the basic structure of the Navigation bar using HTML and link the nav.css file (which we will create in the next steps) using HTML Code: Step 2Ĭreate 2 new files in the text editor and name it nav.html and nav.css ,then save it in the "Navbar" folder Step 3. After creating the "Navbar" folder, open any text editor(we are using Brackets ) to create HTML and CSS file. In the "Navbar" folder we will save our HTML and CSS files which are required in our project to create a navigation bar and style the navigation bar. Step 1Ĭreate a new folder in your computer and name it something like "Navbar"
Css3 menu icon nav how to#
In this tutorial, we will learn how to create a simple Horizontal Navigation Bar for any website in few simple steps by just using HTML, CSS and some hover effect. Many other websites uses horizontal navigation bar for desktop view and a vertical navigation bar for the mobile view of their websites. Some websites have both a horizontal navigation bar at the top and a vertical navigation bar on the left or right side of each website. This type of vertical navigation bar is also called a sidebar, as it appears on the side of the main content. The navigation bar contains the website logo and other navigation options and a search bar too.Īlthough in most of the cases the navigation bar is placed horizontally at the starting of the webpage(on top), but in some cases, a horizontal naigation bar may not fit the website design, so in this type of case we create a vertical navigation bar on the left side or right side of the website. In most of the website the navigation bar is mostly displayed as a horizontal list of links (link to different parts of the website) at the top of every page styled in such a way that it perfectly fits into the website design. In maximum websites the navigation bar is displayed on almost every page of the website but this can differ. Navigation bar is a UI element in the website which contains links to other sections of the same website or other website.
Navigation bar can be of different types and different styles. We have seen navigation bars or top navbars in almost every website and the navbar is one of the basic thing which makes the website attractive and more user friendly(easily navigatable).