2 Super Cool Responsive Dropdown Blogger Navigation Menus

Responsive designing is all that is trending and most advised for bloggers both professionals and newbies. The design is the first thing people see on your blog, and without a responsive blogger navigation menu then you can not really get your blog to fit into any device size (iPhones, Laptops, and Desktops).

Following a request by one of my most encouraging blog reader, Marx Oduogu who followed every step on my previous series 'how to design Ogbongeblog template' and created a beautiful version of the template (see here). 

After the Google Chrome Inspect Series, next series would be how to make your blogger blog fully responsive and flexible. Without using any default template as I taught on Customize Blogger Custom Mobile Template, you can actually make your entire blog responsive and this is the same method followed with the navigation bar. 

How To Add Responsive Dropdown Blogger Navigation Menu

Now let's get to adding the menu bar to blogger via the layout section. It is very easy to add, just follow the easy step by step guide below.

Awesome White Responsive Menu

<nav class="nav" itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <input id="more" aria-hidden="true" tabindex="-1" class="toggle" type="checkbox">
  <div class="nav__inner">
    <div class="nav__logo"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Local news</span></a></div>
    <ul class="nav__list">
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>News</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Sport</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Weather</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>TV</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Radio</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Travel</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Music</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Food</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Arts</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Earth</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Local</span></a></li>
    </ul>
    <div class="nav__toggle">
      <label for="more" aria-hidden="true" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>More</span></label>
    </div>
  </div>
</nav>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/4menunav/white.css"/>

Cool Flat Dark Multi Menu

<div id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <ul>
    <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Home</span></a></li>
    <li class='active'><a href='#' itemprop='url' title='menu'><span itemprop='name'>Products</span></a>
      <ul>
        <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Product 1</span></a>
          <ul>
            <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
            <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
          </ul>
        </li>
        <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Product 2</span></a>
          <ul>
            <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
            <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>About</span></a></li>
    <li><a href=#' itemprop='url' title='menu'><span itemprop='name'>Contact</span></a></li>
  </ul>
</div>
<script src='https://rawgit.com/mastamvan/backup/4menunav/black.js' type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/4menunav/black.css"/>

Step 1

Visit your dashboard www.blogger.com, Locate the layout section, and clink on "Add a gadget" anywhere you want to place the navigation menu. Once it opens, clink on HTML/Javascript.

Step 2

Copy any of the code above and paste it into the HTML/Javascript box. 

Menu Customization

Replace the following codes in the HTML to serve your requirements.

# - with the URL you want to link to.

Products, More - with the name of what you are linking to.

Step 3

Save your template and view you blog. But in case you have placed it below the header or you placed it exactly where the former navigation menu is, then it might have some issues, so I advise you follow step 4.

Step 4 - Remove default Navigation CSS.

Blogger provides us with a static menu bar, so in other not to have scattered template, let's remove the default menu CSS.

Locate the "Edit HTML" in the template section. and search for tabs using CRTL + F. Then you should see some codes similar to the below code. Simply remove everything and save.

/* Tabs
----------------------------------------------- */
.tabs-outer{overflow:hidden;position:relative;background:$(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0}
#layout .tabs-outer{overflow:visible}
.tabs-cap-top,.tabs-cap-bottom{position:absolute;width:100%;border-top:1px solid $(tabs.border.color)}
.tabs-cap-bottom{bottom:0}
.tabs-inner .widget li a{display:inline-block;margin:0;padding:.6em 1.5em;font:$(tabs.font);color:$(tabs.text.color);border-top:1px solid $(tabs.border.color);border-bottom:1px solid $(tabs.border.color);border-$startSide:1px solid $(tabs.border.color);height:16px;line-height:16px}
.tabs-inner .widget li:last-child a{border-$endSide:1px solid $(tabs.border.color)}
.tabs-inner .widget li.selected a,.tabs-inner .widget li a:hover{background:$(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;color:$(tabs.selected.text.color)}

Step 5

View your blog and give me feedback.

The above widgets are dedicated to God almighty for giving me the strength to post all the time and wisdom to code widgets and template. 3 premium templates are on the schedule to get published. Stay with me and enjoy both the free and premium themes.

Tweet