You are currently viewing Creating Basic Navbar Styling using HTML, CSS And Bootstrap

Creating Basic Navbar Styling using HTML, CSS And Bootstrap

Hello coders, welcome to codewithrandom. Today we shall see the building of Navbar using HTML, CSS & JavaScript. We have seen numerous navbar on each and every website. It like a GPS for the website which guides the user to switch between webpages. But the thing which differs that the way of presentation which means every developer build the same navbar but the way of adding effects and altering it size makes it different from other website.

Creating Baisc Navbar Styling using HTML, CSS And Bootstrap

Let us see the coding part for this project:

HTML CODE For Navbar:     

<div class="container">
    <header style="height: 80px"></header>
    <nav class="navbar navbar-inverse bs-dark">
        <div class="navbar-header">
            <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1"
                aria-expanded="false"
            >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span> <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#"
                        >Homepage <span class="sr-only">(current)</span></a
                    >
                </li>
                <li class="dropdown">
                    <a
                        href="#"
                        class="dropdown-toggle"
                        data-toggle="dropdown"
                        role="button"
                        aria-haspopup="true"
                        aria-expanded="false"
                        >Explores <span class="caret"></span
                    ></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">News</a></li>
                        <li><a href="#">Sports</a></li>
                        <li><a href="#">Business</a></li>
                        <li><a href="#">Fashion</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Gallery</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Videos</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left form-horizontal" role="search">
                <div class="input-group">
                    <input
                        type="text"
                        class="search-box"
                        placeholder="Search"
                    />
                    <button type="submit" class="btn">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a
                        href="#"
                        class="dropdown-toggle navbar-img"
                        data-toggle="dropdown"
                        role="button"
                        aria-haspopup="true"
                        aria-expanded="false"
                    >
                        Account
                        <img
                            src="http://placehold.it/150x150"
                            class="img-circle"
                            alt="Profile Image"
                        />
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Followers</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <!----------- !Navbar End ------------>
    <div class="row" style="text-align: center"><h2>Welcome to Mumbai</h2></div>
    <section style="text-align: center; margin: 10px auto"></section>
</div>

 

In this HTML Code we have defined the nav tag for the making of navigation bar and label the menu then we have created a search box with the help of form tag. Then creating a dropdown under the ACCOUNT label so that our navbar follows simplicity.
Let us see the HTML Output, before writing the CSS for Navbar Navigation.

HTML OUTPUT:

 

CSS Code For Navbar:

.bs-dark.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}
.bs-dark .navbar-img {
    padding: 5px 6px !important;
}
.bs-dark .navbar-img img {
    width: 40px;
}
.bs-dark .dropdown-menu {
    min-width: 200px;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #000;
    border: 1px solid rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.bs-dark .dropdown-menu .divider {
    border: 1px solid rgba(0, 0, 0, 0.8);
}
.bs-dark .dropdown-menu > li > a {
    padding: 6px 20px;
    color: rgba(255, 255, 255, 0.8);
}
.bs-dark .dropdown-menu > li > a:hover,
.bs-dark .dropdown-menu > li > a:focus {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    background-color: transparent;
}
.bs-dark .dropdown-menu > .active > a,
.bs-dark .dropdown-menu > .active > a:hover,
.bs-dark .dropdown-menu > .active > a:focus {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    background-color: transparent;
    outline: 0;
}
.bs-dark .navbar-form {
    margin: 0;
    margin-top: 5px;
    padding: 8px 0px;
}
.bs-dark .navbar-form .search-box {
    border: 0px;
    height: 35px;
    outline: none;
    width: 320px;
    padding-right: 3px;
    padding-left: 15px;
    margin: 4px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
}
.bs-dark .navbar-form button {
    border: 0;
    background: none;
    padding: 2px 5px;
    margin-top: 2px;
    position: relative;
    left: -34px;
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.bs-dark .search-box:focus + button {
    z-index: 3;
}
@media (min-width: 768px) {
    .bs-dark .dropdown:hover {
        background-color: #000;
    }
    .bs-dark .dropdown:hover .dropdown-menu {
        display: block;
    }
    .bs-dark .navbar-form {
        padding: 0px;
    }
    .bs-dark .navbar-form .search-box {
        width: 260px;
        height: 32px;
    }
}

In this External CSS code we have styled the tags and classes defined in HTML Code then we have set the bgcolor for the dropdown menu and navbar also we have set the border-radius for the navbar and set the size so that it can’t exceed from the usual size.

Let us have a look at the output.

Final Output Of Navbar:

Summary Of Navbar:

We have created the navbar navigation using HTML & CSS. We defined all the necessary and required tags and classes in HTML code. Then styled the defined tags in HTML code, Then setting their size with the help of External CSS. If you loved it do comment as it boost our motivation to bring new projects for you guys. If you face any difficulty while performing you can reachout us with the help of comment section.

Happy Coding
Written by @Harsh_9

Leave a Reply