Skip to main content

Archive

Show more

Fixed Responsive Dropdown Navigation Bar With Logo | HTML, CSS And jQuery

Fixed-Responsive-Dropdown-Navigation-Bar-HTML-CSS-And-JQuery

Fixed Responsive Dropdown Navigation Bar With Logo Using html, css and Jquery

We design navigation bar with different concepts because it is a very crucial and necessary part of any website. You can check our channel playlist or website playlist which has a number of navigation bars.

This navigation bar has various concept combinations, as you can see our website navigation bar is based on a similar concept.

Firstly this navigation bar is responsive, the next feature is fixed position, have a drop-down with logo. You can use this navigation bar on your website or project.

Check out the navigation bar playlist-
.01 youtube: visit
.02 website: visit

We have already created a lot of animation using javascript and css, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Fixed Responsive Dropdown Navigation Bar With Logo | </title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

You can download that image from github link.


Font-awesome link

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


jQuery cdn link

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<!DOCTYPE html>
<html>
  <head>
    <title>Fixed Responsive Dropdown Navigation Bar With Logo | </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="navigation-bar-container">
      <div class="nav-container">
        <div class="logo-container">
          <a href="#">LOGO</a>
        </div>
        <div class="navbar">
          <div class="nav-mobile">
            <a href="#" id="nav-toggle"><span></span></a>
          </div>
          <ul class="nav-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">YouTube</a></li>
            <li>
              <a href="#">Tutorials <i class="fa fa-caret-down"></i></a>
              <ul class="nav-dropdown">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Services <i class="fa fa-caret-down"></i></a>
              <ul class="nav-dropdown">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">Graphics Design</a></li>
              </ul>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="image-container">
      <img src="image.jpg">
    </div>
    <div class="content">
      <h1>Responsive Navigation Bar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>



03. CSS

body,
html {
  font-family: "Arial", sans-serif;
  margin: 0px;
  padding: 0px;
}

.image-container img {
  width: 100%;
  max-height: 600px;
}

.content {
  padding: 18px 24px;
  text-align: left;
}

.content p {
  margin-top: 10px;
  letter-spacing: 0.08em;
  line-height: 1.6em;
}

.navigation-bar-container {
  position: sticky;
  height: 70px;
  background: #262626;
  z-index: 999;
  width: 100%;
  top: 0px;
  left: 0px;
  right: 0px;
}

.logo-container {
  position: absolute;
  padding-left: 20px;
  float: left;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 1.4em;
  font-weight: bold;
}

.logo-container a,
.logo-container a:visited {
  color: #fff;
  text-decoration: none;
}

.nav-container {
  max-width: 1000px;
  margin: 0px auto;
}

.navbar {
  float: right;
}

.navbar ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  z-index: 9999;
}

.navbar ul li {
  float: left;
  position: relative;
}

.navbar ul li a,
.navbar ul li a:visited {
  display: block;
  padding: 0px 20px;
  line-height: 70px;
  background: #262626;
  color: #fff;
  text-decoration: none;
}

.navbar ul li a:hover,
.navbar ul li a:visited:hover {
  background: #2581DC;
  color: #fff;
}

.navbar ul li ul li {
  min-width: 190px;
}

.navbar ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  z-index: 1;
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.15);
  display: none;
}

.nav-mobile {
  position: absolute;
  float: right;
  top: 0px;
  right: 0px;
  background: #262626;
  height: 70px;
  width: 70px;
  display: none;
}

#nav-toggle {
  position: absolute;
  left: 10px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}

#nav-toggle span,
#nav-toggle span:after,
#nav-toggle span:before {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #fff;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}

#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle span::before {
  top: -10px;
}

#nav-toggle.active span {
  background: transparent;
}

#nav-toggle.active span:after,
#nav-toggle.active span:before {
  top: 0px;
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
}

@media only screen and (max-width: 790px) {
  .nav-mobile {
    display: block;
  }
  .navbar {
    width: 100%;
    padding: 70px 0px 0px;
  }
  .navbar ul {
    display: none;
  }
  .navbar ul li {
    float: none;
  }
  .navbar ul li a {
    padding: 15px;
    line-height: 20px;
  }
  .navbar ul li ul li a {
    padding-left: 30px;
  }
  .nav-dropdown {
    position: static;
  }
}

@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}



04. JQUERY

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

    $('.navbar ul li a:not(:only-child)').click(function (e) {
      $(this).siblings('.nav-dropdown').toggle();
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });

    $('html').click(function () {
      $('.nav-dropdown').hide();
    });

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

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

  });
})(jQuery);


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download from here and change this according to your need.






Comments