How to create blogger navigation menu bar manually - World24Hub

Blogger is free platform hosted by Google and everything here comes with limited features. You have to add some other stuffs manually because you can't do it from plugins of blogger which has limited features. If you have coding skills then it will be great for you that you can everything manually.

I have come up with the unique and great idea about creating navigation menu on blogger website with coding skills. Litter knowledge of coding skills in HTML ,CSS and JavaScript or jQuery will be enough to create navigation menu bar in blogger website.

Let's get started with the step by step guide on creating navigation menu bar in blogger website with coding skills. I will provide the detailed guide on it.

Important Notice ?

Before you edit your template we suggest you to take backup of your current template because you can restore it if anything wrong happened.

If you don't know coding skills then no problem i have detail guidelines on creating navigation menu bar so you just follow the steps below.

Popular on the blog : How to take screenshots in Windows 10

How to create navigation menu bar in blogger manually?

Let's check below to know about how you can create Navigation menu bar on blogger manually with coding skills.

1 : First of all we have to write some html code to start. Copy the following html code. which is navigation menu bar html code.

                                                        
<header class="navigation-menu">
    <div class="menu">
        <div class="menu-links">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Policy</a>
            <a href="#">Disclaimer</a>
        </div>
        <div class="menu-logo">
            <a href="">MyBlog</a>
        </div>
        <div class="menu-toggle">
            <span class="fa fa-bars"></span>
        </div>
    </div>
</header>            
          
        

Now, Goto your blogger dashboard after login and copy the code above and goto Theme ~ Edit Theme and remove the all <header> code from template and paste the copied html snippet code.

2 : We successfully added the code into the blogger website. We will be styling the html with our css code. You can design it on your own way or copy the code from below box.

 
/** Stylesheet for Navigation Menu Bar **/       
.navigation-menu {
    background: #8098ff;
    position: relative;
    height: 72px;
    line-height: 72px;
}
.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.menu-links {
    display: flex;
    justify-content: space-between;
}
.menu-links a {
    text-decoration: none;
    font-size: 16px;
    color: #fff;
    margin-right: 10px;
}
/** Logo **/
.menu-logo a {
    font-size: 23px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
}
/** hide menu button in pc views**/
.menu-toggle {
    display: none;   
    background: ragba(0,0,0,0.05);    
    height:72px;           
    width:72px;           
    line-height:72px;    
    align-items:center;            
    text-align: center ;    
}
.menu-toggle span {
    height: 14px;
    width: auto;
    color: #fff;
}     

Now, Copy the above css code and paste it to your template before closing tag of </style> in the template. and After applying the css code your menu will look like this.

3 : We must make our blog responsive that fits in small mobile devices and use the following css code to make it responsive to all devices which is called responsive navigation menu bar.

     
/** Responsive menu in mobile **/

@media screen and (max-width: 768px) {
    .navigation-menu {
        padding: 0;
    }
    /** display menu button **/
    .menu-toggle {
        display: grid;
        align-items: center;
        text-align: center;
    }
    .menu-logo {
        padding: 0 10px;
    }
    /** menu **/
    .menu-links {
        position: fixed;
        overflow-x: hidden;
        height: 100%;
        width: 250px;
        left: -250px;
        background: #fff;
        top: 0;
        z-index: 22;
        display: block;
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s ease;
    }
    .togmenu .menu-links {
        left: 0;
        opacity: 1;
        visibility: visible;
    }
    .menu-links a {
        display: block
        margin: 0 auto;
        padding: 30px 22px 0px 22px;
        line-height: initial;
        color: #000;
    }
}         

Your navigation menu bar is now reaponsive on mobiles devices now you have to make it fucntionable using javascript.

4 : Everything is completed. Now last step is make the menu functional usong JavaScript. You can use the following JavaScript code.

 

// creating function to make menu work on click

let $ = (selector) => document.querySelector(selector);
let $$ = (selector) => document.querySelectorAll(selector);
var main = $(".navigation-menu"),
    button = $(".menu-toggle"),
    body = $("body");
    
button.onclick = () => {
    main.classList.toggle("togmenu");
};
  

You should use this above JavaScript function before </body> tag in your template or before </head> closing tag to make it functional in thr blogger template.

So far, we created the functional to navigation menu bar for blogger using html, css and JavaScript. If you want to know what you have done so far you can see the codepen demo. How your navigation menu bars looks like or works.

See the Pen Simple Navigation Menu Bar by Buddhalimbu (@buddhalimbu-the-lessful) on CodePen.

Congratulations, you have successfully created the blogger top navigation menu bar using simple coding skills.

That's all for today, We will provide more and more similar tutorial for your in further days. If you face any issue let us know.