Blogger Mobile Responsive Navigation Menu (Pure CSS, HTML and JavaScript)
Default blogger navigation menu is not mobile friendly and whenever you want to build a mobile responsive blogger template, getting a responsive mobile menu is vital. While designing a template for a client, a need came for a flexible navigation menu.

This menu is what I used to design my ObhiabaCyrack blogger template. The menu is fast loading and does not affect the loading speed of your blog because it is built on pure HTML, CSS, and Javascript. 
floating blogger menu
The main functions of the JavaScript I added to the blogger navigation menu, is simple. I want it to be responsive on mobile and also float when scrolling. I could have done these two thinks using just CSS but it seems like JavaScript gives the best result.

Main Feature Of The Menu

Float on Scroll

This menu has javascript file, that makes it float while your users are scrolling down your blog. This kind of widget increase your blog's clear navigation and also let the users easily move around your blog without having to scroll back up again for menu items.

Responsive On Mobile

My major concern while building this menu was responsiveness. I kind of love responsive designs because they are mobile user-friendly and SEO optimized.

Schema Tag

I have never done this before, except on my mind blog. Schema tags are specified tags which google and other search engines use to identify the different section of the page. Using these tags increase your blog SEO as search engines find your blog very easy to crawl.

Simple Design

Easy to set up and also comes with a simple design. I know many persons love drop-down menus. Am no fan of it, I believe you should stop hiding items on drop-downs this is why I didn't include any drop-down menu.

Info: If you wish to create responsive themes, read this post - Make Blogger Blog Fully Responsive And Mobile Friendly

See Demo
Live Preview

Add Mobile Responsive Blogger Navigation

We are going to be making use of the template HTML section to add CSS and JavaScript while we will go to layout to add the HTML.

Go to themes >> Edit HTML.


I defined the look and styles of the menu using pure CSS. below is the CSS code, simply copy and paste it below ]]></b:skin>

.topnav{overflow:hidden;background-color:#fff;z-index:9999;width:100%;height:50px;margin-bottom:0;box-shadow:2px 2px 3px rgba(0,0,0,.05);padding-top:0;border-top:1px solid #eee;background:#fff}
.topnav a{float:left;display:block;color:#303030;text-align:center;padding:14px 16px;text-decoration:none;font-size:16px}
.topnav a:hover{background-color:#ddd;color:black}
.topnav .icon{display:none}
@media screen and (max-width:600px){.topnav a:not(:first-child){display:none}.topnav a.icon{float:right;display:block}}
@media screen and (max-width:600px){.topnav.responsive{position:relative}.topnav.responsive .icon{position:absolute;right:0;top:0}.topnav.responsive a{float:none;display:block;text-align:left}}

The JavaScript.

Like I said early, the functionality of this menu which includes its ability to float on a scroll and also become responsive on mobile is built purely on JavaScript.

Copy and paste the below codes above </body> in your theme body.

<!--Blogger Floating Menu by Obhiaba Blog-->
<script type='text/javascript'>
$(function() {
        var nav = $('.topnav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
                position: 'fixed',
                top: 0,
            isFixed = true;
        else if (!shouldBeFixed && isFixed)
                position: 'static'
            isFixed = false;
<script type='text/javascript'>
var nav = $(&#39;#menu &gt; ul &gt; li&#39;);
nav.find(&#39;li&#39;).hide(); () {
$(function() {
    $(&#39;#menu input&#39;).click(function () {
    $(&#39;#menu ul&#39;).slideToggle()
<script async='async' src='' type='text/javascript'/>


Using HTML I have defined the tags and Schema, all you need to do is add the below code inside an HTML/JavaScript box. Either above your blog header or below blog header.

<div class="topnav" id="myTopnav" itemprop='mainEntity' itemscope='itemscope' itemtype=''>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>

You can add more menu items by adding  <a href="#contact">Contact</a> below Home item.

Rounding Up

This menu navigation is simple and unique. Its functions are both of proper functionality and amazing design. It's is customizable since you can simply change the background colors and text colors. Enjoy this blogger widget and leave your comments below.

Share with your friends on social media if this post was worth a read!.
  • 0
  • Share
  • No Responses

    1. the demo link is redirecting to 404 error page….

      1. Share

    You must be loggedin to comment