How to create a simple nanigation bar with HTML and CSS?

on


Creating a navigation bar is an essential part of any website, as it provides a clear and easy-to-use way for visitors to navigate your site. In this tutorial, we will walk you through how to create a simple navigation bar using HTML and CSS.

Step 1: Set Up the HTML

The first step in creating a navigation bar is to set up the HTML code for the navigation bar. This can be done by creating a list of links that will be displayed in the navigation bar. Here is an example of the HTML code for a simple navigation bar:
In this code, we have created a nav element, which contains an unordered list (ul) of links (li). Each link is represented by an anchor (a) element, which has a href attribute that points to the page it should link to.

Step 2: Style the Navigation Bar with CSS

The next step is to style the navigation bar using CSS. This can be done by targeting the nav element and applying styling properties such as background color, font size, and padding. Here is an example of the CSS code for a simple navigation bar:
In this code, we have targeted the nav element and applied a background color of #2C3333 and a padding of 20px. We have also targeted the ul element and applied a list-style of none, a margin and padding of 0, and a display of flex with justify-content set to space-between. This will position the links evenly spaced across the navigation bar. We have also targeted the li element and applied a margin of 0 10px to create space between each link. Finally, we have targeted the a element and applied a white font color, removed the underline with text-decoration: none, and set the font size to 18px.
Step 3: Add Hover Effects

To make the navigation bar more interactive, we can add hover effects to the links. This can be done by targeting the a element and applying a different background color when the user hovers over the link. Here is an example of the CSS code for adding hover effects:

In this code, we have targeted the a element when the user hovers over it and applied a background color of #FFF.

Step 4: Make the Navigation Bar Responsive
Finally, we can make the navigation bar responsive by adjusting the layout for smaller screens. This can be done by adding media queries to the CSS code that target different screen sizes. Here is an example of the CSS code for making the navigation bar responsive:
In this code, we have added a media query that targets screen sizes


HTML CODE


        <div class="navbar">
            <div class="nav_div">
                <div class="heading">
                    <h1>Coding Solution Point</h1>
                </div>
                <div class="list">
                    <ul type="none">
                        <li>Home</li>
                        <li>Services</li>
                        <li>About</li>
                        <li>Blog</li>
                    </ul>
                </div>
                <div class="button">
                    <button>Shop Now</button>
                </div>
            </div>
        </div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>        


CSS CODE


        * {
            margin: 0;
            padding: 0;
            font-family: arial;
        }
        .navbar {
            width: 100%;
            height: 80px;
            /*background-color: dimgray;*/
        }
        .nav_div {
            width: 1300px;
            height: 80%;
            position: relative;
            top: 20px;
            background-color: #2C3333;
            border-bottom: 2px solid black;
            margin: auto;
            box-shadow: 5px 5px 8px 5px #888;
        }
        .heading {
            width: 400px;
            height: 100%;
            /*background-color: yellow;*/
            float: left;
            margin-left: 30px;
        }
        .heading h1 {
            font-size: 35px;
            color: blueviolet;
            margin-top: 10px;
        }
        .list {
            width: 400px;
            height: 100%;
            /*background-color: blue;*/
            float: left;
            margin-left: 100px;
        }
        .list ul li {
            float: left;
            margin: 20px;
            color: white;
            font-size: 20px;
        }
        .list ul li:hover {
            color: #FFC23C;
        }
        .button {
            width: 300px;
            height: 100%;
            /*background-color: yellow;*/
            float: left;
        }
        .button button {
            width: 200px;
            height: 40px;
            background-color: blueviolet;
            margin-top: 13px;
            color: white;
            font-size: 16px;
            border-radius: 50px;
            border: none;
            text-align: center;
            position: relative;
            left: 100px;
        }
        .button button:hover {
            background-color: #FFC23C;
        }               

Comments

Post a Comment