Add a Responsive Sticky Navigation Menu with Social Media Icons to Blogger - Fancybloggertricks

Add a Responsive Sticky Navigation Menu with Social Media Icons to Blogger

- 7:47:00 AM
Happy Sunday guys. I was inspired to write on how to add a responsive sticky navigation menu bar on a blogger blog by the comment of one of my readers. Using a responsive sticky navigation bar is very cool because it sticks to the top of your blog as you scroll down, which also improves easy navigation.

How to add a responsive sticky navigation menu to a blogger blog
This navigation menu is equipped with social media icons like facebook, twitter, Google Plus and Pinterest as well. Also this sticky nav bar menu is very mobile responsive, which means it adapts to fit any screen size it's viewed on. It won't spoil your blog design in anyway.


There are multiple ways of doing this on the net, but most of them requires a little bit of coding knowledge with might not even work sometimes but today I am going to share the easiest way to add a responsive sticky navigation menu with social media icons to a blogger blog without any coding knowledge. With this tutorial you will be able to do everything in your Layout tab.

How To Add a Sticky Navigation bar to Blogger


  • Login to your blogger dashboard
  • Goto the Layout Tab
  • On the sidebar, click on Add a Gadget and select an Html/Javascript widgets
  • Now paste the below codes in the html box. 

<link rel="stylesheet" type="text/css" href="https://rawgit.com/101Helper/docs/master/slideout-nav-public.css" />
<nav id="nava" role="navigation" class="sticky-nav" style="top: 0px;">
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" id="search-in" size="19" required />
<input name="m" type="hidden" value="1" />
<button type="submit"  class="_54k8 _56bs _56b_ _56bw _56bu"  id="u_0_1" data-sigil="touchable"><span class="_55sr">Go!</span></button>
<img id="hide-search" src="http://1.bp.blogspot.com/-tKEvMrl1rNg/VlHno1INErI/AAAAAAAAEDM/p6QC4v0mUGg/s1600/rsz_close-icon.jpg" />
<div id="search-height"></div>
</form>
<div class="prl-container">
<div class="nav-wrapper clearfix">
<img id="show-search" src="http://2.bp.blogspot.com/-JJaM7cFOVhQ/VlHnpNl_awI/AAAAAAAAEDU/DoJe685oe7w/s1600/rsz_search-icon.png" />
<div style="float:left;">
<div class="nav_menu_control"><a href="#" data-prl-offcanvas="{target:'#offcanvas'}"><img src="http://1.bp.blogspot.com/-pb2BSgtLzLA/VlHnpOZWKCI/AAAAAAAAEDQ/T3ujbHq-QXE/s1600/rsz_mobile-menu-icon.png"/></a></div>
</div>
<div class="container">
<div class="left">
<a href="/?m=1"><img src="YOUR-LOGO-URL" height="50" width="300"/></a>
</div>
<div class="clear"></div></div></div></div></nav><div style="clear: both;"></div>

<div id="offcanvas" class="prl-offcanvas">
<div class="prl-offcanvas-bar">
<div class="social-icons" style="padding-top: 5px;background: #fff;padding-left: 5px;">
<p>Follow us:</p>
<a href="YOUR-FACEBOOK-PAGE-URL"><img border="0" src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/128/social-facebook-box-blue-icon.png" /></a>
<a href="YOUR-TWITTER-URL"><img border="0" src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/128/Twitter-icon.png" /></a>
<a href="YOUR-PINTEREST-URL"><img border="0" src="http://2.bp.blogspot.com/-Y4pUO8DhyRI/VkyJRMUnxFI/AAAAAAAAECs/3K3W7_XD4eM/s1600/App-Pinterest-icon.png" /></a>
<a href="GOOGLE-PLUS-URL" /><img src="http://icons.iconarchive.com/icons/martz90/circle/128/google-plus-icon.png" alt="Google+" />
</a>
</div>
<nav class="side-nav">
<ul id="nav-list" class="nav-list">
<li><a href="/?m=1">Home</a></li>
<li><a href="#">Phones</a></li>
<li><a href="#">Computers</a></li>
<li><a href="#">Web tutorials</a></li>
<li><a href="#">Site News</a></li>
<li><a href="#">Sponsor A Post</a></li>
<li><a href="#">Write For Us</a></li>
<li><a href="#">Advertise With Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div></div>
<script type='text/javascript' src='https://rawgit.com/101Helper/docs/master/slideout_mobile_menu.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='https://rawgit.com/101Helper/docs/master/slideout_mobile_menu.js'></script>
<script>
$(document).ready(function(){
$("#hide-search").click(function(){
$("#searchbox").hide();
});
$("#show-search").click(function(){
$("#searchbox").show();
});
});
</script>
<div id='menu-height'/></div>

Customization.


From the above codes. Replace; 

YOUR-LOGO-URL with the image URL of your logo. The logo must be 50px high and 300px wide. 

YOUR-FACEBOOK-PAGE-URL with your facebook page or profile URL. Example,  http://www.facebook.com/thefixmansion

YOUR-TWITTER-URL with your twitter account URL 

YOUR-Pinterest-URL with your Pinterest profile or page url

YOUR-GOOGLE-PLUS-URL with your Google Plus page or profile url

Replace the # with the URL of your Categories and Pages URL. The links should be in this format;

For Categories: http://www.example.com/search/label/Phones

For Pages: http://www.example.com/p/about-us

Now finally click on Save. It's that simple, refresh your blog and see the magic.

I hope you successfully added a responsive sticky navigation menu bar to your blogger blog with the above method? Are you face any problem adding this navigation bar to your blog? kindly Leave a comment behind and let's help you out. 

Is this tutorial helpful?  Take 5secs to drop your feedback through the comment section and keep sharing with your friends.

4 blogger

avatar

Oh thank u soo much i really needed that!! Dnt be angry i want to request another thing... Is there a way to put jump to comment in a post page?

avatar

Hello Michael,

I am very glad this tutorial was helpful to you and yes there is a way to put a jump to comment or any part of a post on blogger. I will discuss that in my next post.

Stay with us..

We love comments but spam or irrelevant comment with lots of links will be removed immediately.
EmoticonEmoticon

 

Start typing and press Enter to search