Scribd Logo
Upload

Welcome to Scribd!

  • 162 views

    How To Create A Responsive Navigation Menu With Icons

    Uploaded by

    Aneka Cara
    This document provides instructions on how to create a responsive navigation menu with icons using HTML and CSS. It includes example code to add a navigation bar with links containing font awesome icons. CSS is used to style the navigation bar, links, and add responsiveness for smaller screens. The menu automatically stacks vertically on narrow screens. Tips are provided to learn more about navigation bars and creating icon-only navigation menus.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    How To Create A Responsive Navigation Menu With Icons

    Uploaded by

    Aneka Cara
    162 views4 pages
    This document provides instructions on how to create a responsive navigation menu with icons using HTML and CSS. It includes example code to add a navigation bar with links containing font awesome icons. CSS is used to style the navigation bar, links, and add responsiveness for smaller screens. The menu automatically stacks vertically on narrow screens. Tips are provided to learn more about navigation bars and creating icon-only navigation menus.

    Original Description:

    Responsive Navigation

    Original Title

    How To Create a Responsive Navigation Menu with Icons

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides instructions on how to create a responsive navigation menu with icons using HTML and CSS. It includes example code to add a navigation bar with links containing font awesome icons. CSS is used to style the navigation bar, links, and add responsiveness for smaller screens. The menu automatically stacks vertically on narrow screens. Tips are provided to learn more about navigation bars and creating icon-only navigation menus.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    162 views4 pages

    How To Create A Responsive Navigation Menu With Icons

    Uploaded by

    Aneka Cara
    This document provides instructions on how to create a responsive navigation menu with icons using HTML and CSS. It includes example code to add a navigation bar with links containing font awesome icons. CSS is used to style the navigation bar, links, and add responsiveness for smaller screens. The menu automatically stacks vertically on narrow screens. Tips are provided to learn more about navigation bars and creating icon-only navigation menus.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 4

    12/11/2019 How To Create a Responsive Navigation Menu with Icons

      HTML CSS JAVASCRIPT MORE    


    w3schools.com
    THE WORLD'S LARGEST WEB DEVELOPER SITE

    How TO - Navbar with Icons


    ❮ Previous Next ❯

    Learn how to create a responsive navigation menu with icons, using CSS.

    Navigation Bar With Icons


     Home  Search  Contact  Login

    Try it Yourself »

    Create A Responsive Navbar with Icons


    Step 1) Add HTML:

    https://www.w3schools.com/howto/howto_css_navbar_icon.asp 1/7
    12/11/2019 How To Create a Responsive Navigation Menu with Icons

    Example
     HTML CSS JAVASCRIPT MORE    

    <!-- Load an icon library -->


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

    <div class="navbar">
    <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
    <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
    <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
    <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
    </div>

    Step 2) Add CSS:

    Example
    /* Style the navigation bar */
    .navbar {
    width: 100%;
    background-color: #555;
    overflow: auto;
    }

    /* Navbar links */
    .navbar a {
    float: left;
    text-align: center;

    https://www.w3schools.com/howto/howto_css_navbar_icon.asp 2/7
    12/11/2019 How To Create a Responsive Navigation Menu with Icons

    padding: 12px;
      HTML CSS JAVASCRIPT
    color: white;
    MORE    
    text-decoration: none;
    font-size: 17px;
    }

    /* Navbar links on mouse-over */


    .navbar a:hover {
    background-color: #000;
    }

    /* Current/active navbar link */


    .active {
    background-color: #4CAF50;
    }

    /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less
    than 500 pixels */
    @media screen and (max-width: 500px) {
    .navbar a {
    float: none;
    display: block;
    }
    }

    Try it Yourself »

    Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

    https://www.w3schools.com/howto/howto_css_navbar_icon.asp 3/7
    12/11/2019 How To Create a Responsive Navigation Menu with Icons

    Tip: If you want to create a navigation bar that only contains icons, read our How To - Icon Bar Tutorial.
      HTML CSS JAVASCRIPT MORE    

    ❮ Previous Next ❯

    COLOR PICKER

    HOW TO

    Tabs
    Dropdowns
    Accordions
    Side Navigation
    Top Navigation
    Modal Boxes
    Progress Bars
    Parallax
    Login Form
    HTML Includes
    Google Maps
    Range Sliders
    https://www.w3schools.com/howto/howto_css_navbar_icon.asp 4/7

    You might also like