How to create responsive top navbar in blogger without JQuery

How to create responsive blogger navigation

Hello everyone. Welcome to Peak Fiction where we talk about blogger tips and tutorials. On this occasion I will share with blogger friends about how to create blogger navigation with a dropdown menu without JQuery. We know that there are lots of free and premium blogger templates. From this template, we sometimes find headers or navigation menus with dropdowns , but they still use JavaScript, which must contain JQuery. Of course, JQuery reduces our template loading because our blog will load from third-party hosting where JQuery is placed.

If our template is slow, it can make visitors uncomfortable waiting and ultimately our visitors run away looking for the article they want on another blog. We as bloggers definitely don't want that to happen, right? For those of you whose navigation on the template still uses JQuery, you can change it by navigating in the tutorial below.

How do I create a navigation menu in Blogger?

To change the navigation on Blogger, friends, you can see the following steps:

First step: You have to enter Blogger, then theme and select Edit HTML. After that, delete the CSS script, Javascript, and navigation caller tags which are usually located in the header menu.Then replace the navigation CSS that you have deleted with the navigation CSS below:

/* By Peak Fiction */

.topnav {

  background-color: #333;

  overflow: hidden;

}

/* Style the links inside the navigation bar */

.topnav a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

/* Add an active class to highlight the current page */

.active {

  background-color: #4CAF50;

  color: white;

}

/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {

  display: none;

}

/* Dropdown container - needed to position the dropdown content */

.dropdown {

  float: left;

  overflow: hidden;

}

/* Style the dropdown button to fit inside the topnav */

.dropdown .dropbtn {

  font-size: 17px;

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}

/* Style the dropdown content (hidden by default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}

/* Style the links inside the dropdown */

.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}

/* Add a dark background on topnav links and the dropdown button on hover */

.topnav a:hover, .dropdown:hover .dropbtn {

  background-color: #555;

  color: white;

}

/* Add a grey background to dropdown links on hover */

.dropdown-content a:hover {

  background-color: #ddd;

  color: black;

}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {

  display: block;

}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {

  .topnav a:not(:first-child), .dropdown .dropbtn {

    display: none;

  }

  .topnav a.icon {

    float: right;

    display: block;

  }

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {

  .topnav.responsive {position: relative;}

  .topnav.responsive a.icon {

    position: absolute;

    right: 0;

    top: 0;

  }

  .topnav.responsive a {

    float: none;

    display: block;

    text-align: left;

  }

  .topnav.responsive .dropdown {float: none;}

  .topnav.responsive .dropdown-content {position: relative;}

  .topnav.responsive .dropdown .dropbtn {

    display: block;

    width: 100%;

    text-align: left;

  }

}

Second step: After placing the navigation CSS, the second step is to place the CSS caller. Place the code below right where the previous navigation was placed in your template.

<div class="topnav" id="myTopnav">

  <a href="#home" class="active">Home</a>

  <a href="#news">News</a>

  <a href="#contact">Contact</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div>

  <a href="#about">About</a>

Third step: After placing the CSS calling code, the next step is to place the JavaScript code below just above the </body> code.

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */

function myFunction() {

  var x = document.getElementById("myTopnav");

  if (x.className === "topnav") {

    x.className += " responsive";

  } else {

    x.className = "topnav";

  }

}

Fourth step: If everything is done, the final step is to save the template. Try it by looking at your template, if it doesn't match the colors or anything else, you can just edit the CSS.

This navigation tutorial uses font awesome icons. You can change the icons by using this site.

How? it's easy isn't it? If you have questions, you can ask in the comments column.