How to add responsible (sticky navigation menu bar) in blogger website

Most welcome to urdumeinhelp Some Many popular websites these days are starting to add "fixed" or (sticky navigation menu bar) on top when scrolling to help visitors find their way around the sites. It means that the readers doesn’t have to scroll back to the top of the page to choose a different page or topic. Instead they have access to the main navigation at all time.

A fixed navigations is places at the very top of the page and remains there when scrolling down. A sticky navigation is usually placed beneath the header, once the visitors starts to scroll down the navigation will become fixed once it “hits” the top of the browser windows.

TUTORIAL 1: Add Custom Fixed Menu Navigation Bar in Blogger websites.

To make your navigation bar appear at the top of your blogger website on load and make fixed to the top of the browser window while the user is scrolling your web page.

1. So If you already have a custom navigation menu bar when scrolling set up you’ll need to wrap it in a div with the id navigation bar like this

<div id="navigationbar">

..Navigation goes here ..

</div>

 

2. Go to Blogger dashboard Theme > Edit HTML and above ]]></b:skin> add the following code.

/* START URDUMEINHELP FIXED NAV BAR */

#navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

/* END URDUMEINHELP FIXED NAV BAR */

3. To remove Blogger admin navbar, then go to Layout > NavBar and turn it off. You’ll be left with a blank spaces. To remove this gap go to Template > Edit HTML and above ]]> </b:skin> add the followings ⤵️

body .navbar { height: 0px;

TUTORIAL 2 – Make Stylish "Sticky Navigation" Menu Bar in Blogger.

So If your navigation bar is under your header tag and you want it to "sticky fixed" to the top of the windows when you scroll past it then follow this tutorial.

1. First Go to Template > Customise > Advanced option under blogger setting, (style) > Add CSS and add the following code. When you add CSS to the Template Designer on Blogger, it gets placed before ]]></b:skin> in your blogger templates. Change the coloured code to suit your blog layout. So press Apply To Blog.

/* START URDUMEINHELP STICKY NAV BAR */

sticknav {

background: #ffffff;

height: 30px;

width: 100%;

margin-right: auto;

margin-left: auto;

left: 0px;

right: 0px;

position: relative;

z-index: 9999;

}

.fixed { position:fixed;}

/* END URDUMEINHELP STICKY NAV BAR */

2. Next, you’ll need to set up your navigation-menu Here is a tutorial showing you how to create and style a basic navigational baar.

3. Find the code for your navigation code – this is could be in your blog website template or in a gadget. Then Paste <sticknav> before it and </sticknav> after it.

<sticknav> 

(code for navigation)

</sticknav> 

 

4. The final step is to add a script to tell the bar to scroll. To do this go to Layout > Add Gadget > HTML/Javascript Gadget and paste the following.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var aboveHeight = $('header').outerHeight();

    $(window).scroll(function(){

        if ($(window).scrollTop() > aboveHeight){

        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');

        } else {

       $('sticknav').removeClass('fixed').next().css('padding-top','0');

        }

    });

});

</script> 

5. The script presumed that your <header> is called header (see pink line). If the navigation is jumping replaced.

var aboveHeight = $('header').outerHeight();

with the following, adjust the value for the height your header is

var aboveHeight = 300;

TUTORIAL 3 – Fixed Pages Gadget blogger HTML.

If you’re using Bloggers Pages gadget, you can simply add the following code to make it easy fixed to the top of the browser windows. Go to Template > Edit HTML and add this code above ]]> </b:skin>

#PageList1 { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

The selector you use (#PageList1, #PageList2, #PageList3, #PageList4, .pagelist, etc 😃) will depend on your template coding and how many PageList gadgets you’ve added.

How to Centre & Style the Navigation

To centre your navigation, add the following code above </b:skin> 

So Go to Template > Edit HTML. 

/* Urdumeinhelp Centre Navigation */

.tabs .widget li, .tabs .widget li{ display: inline; float: none;} 

Some templates may need this instead. 😶 😊

/* Centre Navigation */

.tabs .widget li, .tabs .widget li{ display: inline-block; float: none;} 

And this

/* Centre Navigation */

.tabs-inner .widget ul { text-align: center;} .tabs .widget li, .tabs .widget li {display: inline-block; float: none;} 

Gap above navigation

To remove Blogger navigation bar, 

go to Layout > NavBar and turn it off. You’ll be left with a blank space. To remove this gap go to Template > Edit HTML and above ]]> </b:skin> add the following

body .navbar { height: 0px; } .content-inner { padding-top: 0px; }

Elements losing stylings/CSS when moved above header tag.

Occasionally, pitting certainly elements above the header will remove the CSS associated with it. Here’s a solutions to that. In the layout tab drag your header, navigation and any other gadgets down a little. It will jump to the second level, this shouldn’t affect the look of your blog (as in it will still appear at the top) but it will keep the styling. This images will hopefully explain that better. so how to add sticky menu in blogger article is really helpful share on your social network thx .

happy blogging . 😃😎

Read More: How to add Stylish dark mode button in blogger websites. 

• How to add stylish html css coding box in blogger.