Navigation Bar With Logo Using HTML and CSS

Navigation Bar With Logo Using HTML and CSS

Hello Coders, Welcome to the new article of Codewithrandom Blog. In this article, we will learn about how to create a Responsive Navigation Bar With Logo Using HTML and CSS. We will add a logo to this Navbar so, let’s follow this article step-by-step to create an amazing responsive navbar.

Navigation Bar With Logo in HTML and CSS

Reposnsive Navbar Using HTML and CSS
Responsive Navbar Using HTML and CSS

 

Navigation Bar With Logo Using HTML and CSS

How to Create Navigation Bar With Logo in HTML and CSS

The navigation bar is the area that is positioned at the top of websites or applications to assist users in switching from one page to another. Mainly the navigation bar contains a logo, navigation links, and other functions as per the motto of the website.

Responsive Navbar Using HTML AND CSS

We will use then section element as a parent element to creating this navigation bar using html and CSS, and then we will use The ul element as the second parent element for wrapping all the li elements. And inside the element, we will wrap our all navbar tittle headers and navbar content like Home, contact , privacy , login, and anything you want.  I am embedding a frame that will show you a live preview of This responsive navbar with a logo, and this navbar will be responsive, including Logo, simple, and understandable. So See the following preview.

Html code of Responsive Navbar

So First of all we have to link css file for designing. You can use external or internal CSS, In this post I am going to use internal CSS if you want to use external css you have to use link tag inside the head tag, you can follow the following written code.

<link rel='stylesheet' href='file_path.css'/>

Let’s see the HTML code of responsive navbar with the logo, we have to add logo inside the main section tag so it can be visible is the main section. Follow the HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar Using and Css with Logo </title>
</head>
<body>
    <section class="navigation">
        <div class="nav-container">
          <div class="brand">
            <a href="#!">Logo</a>
          </div>
          <nav>
            <div class="nav-mobile"><a id="navbar-toggle" href="#!"><span></span></a></div>
            <ul class="nav-list">
              <li>
                <a href="#!">Home</a>
              </li>
              <li>
                <a href="#!">About</a>
              </li>
              <li>
                <a href="#!">Services</a>
                <ul class="navbar-dropdown">
                  <li>
                    <a href="#!">Sass</a>
                  </li>
                  <li>
                    <a href="#!">Less</a>
                  </li>
                  <li>
                    <a href="#!">Stylus</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#!">Portfolio</a>
              </li>
              <li>
                <a href="#!">Category</a>
                <ul class="navbar-dropdown">
                  <li>
                    <a href="#!">Sass</a>
                  </li>
                  <li>
                    <a href="#!">Less</a>
                  </li>
                  <li>
                    <a href="#!">Stylus</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#!">Contact</a>
              </li>
            </ul>
          </nav>
        </div>
      </section>
</body>
</html>

CSS Code Of Responsive Navbar With Logo

After that, style the navbar using the following CSS styles. If you want to customize the navigation bar, you can set the custom values for the #navbar id selector. By default, the navbar is fixed on the top of the webpage, you can remove this property if you don’t want to make it sticky. Moreover, the background and height (that is 60px) can be set according to your needs.

 @import url('https://fonts.googleapis.com/css?family=Roboto');
body{
    margin: 0;
     padding: 0;
     font-family: 'Roboto', sans-serif;
}
 .navigation {
     height: 55px;
     background: linear-gradient(45deg, #4199fe, #74b4fe);
}
 .brand {
     position: absolute;
     padding-left: 20px;
     float: left;
     line-height: 55px;
     text-transform: uppercase;
     font-size: 1.4em;
}
 .brand a, .brand a:visited {
     color: #ffffff;
     text-decoration: none;
}
 .nav-container {
     max-width: 1000px;
     margin: 0 auto;
}
 nav {
     float: right;
}
 nav ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
 nav ul li {
     float: left;
     position: relative;
}
 nav ul li a,nav ul li a:visited {
     display: block;
     padding: 0 20px;
     line-height: 55px;
     color: #fff;
     background: #262626 ;
     text-decoration: none;
}
 nav ul li a{
     background: transparent;
     color: #FFF;
}
 nav ul li a:hover, nav ul li a:visited:hover {
     background: #2581DC;
     color: #ffffff;
}
 .navbar-dropdown li a{
     background: #2581DC;
}
 nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
     padding-left: 4px;
     content: ' \025BE';
}
 nav ul li ul li {
     min-width: 190px;
}
 nav ul li ul li a {
     padding: 15px;
     line-height: 20px;
}
 .navbar-dropdown {
     position: absolute;
     display: none;
     z-index: 1;
     background: #fff;
     box-shadow: 0 0 35px 0 rgba(0,0,0,0.25);
}
/* Mobile navigation */
 .nav-mobile {
     display: none;
     position: absolute;
     top: 0;
     right: 0;
     background: transparent;
     height: 55px;
     width: 70px;
}
 @media only screen and (max-width: 800px) {
     .nav-mobile {
         display: block;
    }
     nav {
         width: 100%;
         padding: 55px 0 15px;
    }
     nav ul {
         display: none;
    }
     nav ul li {
         float: none;
    }
     nav ul li a {
         padding: 15px;
         line-height: 20px;
         background: #262626;
    }
     nav ul li ul li a {
         padding-left: 30px;
    }
     .navbar-dropdown {
         position: static;
}
 @media screen and (min-width:800px) {
     .nav-list {
         display: block !important;
    }
}
 #navbar-toggle {
     position: absolute;
     left: 18px;
     top: 15px;
     cursor: pointer;
     padding: 10px 35px 16px 0px;
}
 #navbar-toggle span, #navbar-toggle span:before, #navbar-toggle span:after {
     cursor: pointer;
     border-radius: 1px;
     height: 3px;
     width: 30px;
     background: #ffffff;
     position: absolute;
     display: block;
     content: '';
     transition: all 300ms ease-in-out;
}
 #navbar-toggle span:before {
     top: -10px;
}
 #navbar-toggle span:after {
     bottom: -10px;
}
 #navbar-toggle.active span {
     background-color: transparent;
}
 #navbar-toggle.active span:before, #navbar-toggle.active span:after {
     top: 0;
}
 #navbar-toggle.active span:before {
     transform: rotate(45deg);
}
 #navbar-toggle.active span:after {
     transform: rotate(-45deg);
}

JavaScript Code(jQuery):-

We are using javascript for better optimization and responsiveness of this HTML ,CSS and javascript code, and for managing screens and many more optimization purpose which are written down.

    (function($) { 
  $(function() { 

    //  open and close nav 
    $('#navbar-toggle').click(function() {
      $('nav ul').slideToggle();
    });


    // Hamburger toggle
    $('#navbar-toggle').on('click', function() {
      this.classList.toggle('active');
    });


    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.navbar-dropdown').slideToggle("slow");

      // Close dropdown when select another dropdown
      $('.navbar-dropdown').not($(this).siblings()).hide("slow");
      e.stopPropagation();
    });


    // Click outside the dropdown will remove the dropdown class
    $('html').click(function() {
      $('.navbar-dropdown').hide();
    });
  }); 
})(jQuery);

Conclusion

Responsive Navigation Bars, which I developed using HTML, CSS, and JAVASCRIPT. I tried to include diverse navigation bars with various functionalities. I hope they meet your needs and that you like them.

 

Can I include icons in my responsive navigation menu?

yes, you can include icons in this navbar

Are there any beginner-friendly article for building a responsive navigation bar?

Yes This is fully beginner-friendly article for building a responsive navigation bar

How can I make my navigation menu responsive to different screen sizes?

To make your navigation menu responsive, you can utilize media queries in CSS. These queries adjust the layout and appearance based on the screen size



Leave a Reply