How to Make Sticky Navigation Bar While Scrolling in any Blogger Template

Many popular sites nowadays have started adding specific or sticky navigation Bar so that visitors can find their way around the site. This means that the reader does not have to go back to the top of the page to choose a different page or topic. Instead, they always have access to the main navigation.

Is placed at the very top of the page on particular navigation and stays there when scrolling down. A sticky navigation Bar is usually placed at the bottom of the title, and once the visitors start scrolling, the navigation will be "hit" at the top of the browser window.

Sticky or Fixed Menu Concept

The navigation bar is at the very top of any website. It usually highlights the main menu, which allows visitors to view all sections of the website. Sticky or fixed menus are used to make the menus of the website better visible and highlighted, so when the user scrolls through the whole website, there is a little menu part, it is convenient to go to another menu part. There are many ways to create this fixed or sticky menu. I have said or seen here a relaxed and simple process through which it will be possible to make bricks very easily.

Sticky or Fixed Menu Advantage

• Make Your Website Like Blogger WordPress More User-Friendly.

• Visitors can easily navigate and access any content in a very short time.

• Can reduce bounce rate.

• Attachment Sticky Navigation Bar. This will make the website more responsive and stylish, SEO will help.

Note: Before applying this process, you must have a backup of your blog theme. So that if there is any mistake in the code, it can be recovered and restored. 

How to Make Sticky Navigation Bar 

Step 1: The first login to the Blogger account then go to Theme Options

Step 2: then click edit HTML

Step 3: Find (Ctrl+F) </b:skin> or inside menu css 
copy frist html codeing  paste </b:skin> above.coding available in below downlord option.

Step 4: Find (Ctrl+F) </body> 
copy second html codeing  paste </body>  above.coding available in below downlord option.

May You Like: Google AdSense Pros And Cons

Make Sticky Navigation Bar 

Download HTML CODE is given below

please note: After paste, the code replaces "menu-wrap" with your appropriate nav id. 

nav id can be found in the main menu below your template. Go to edit HTML Find (Ctrl+F) main menu. copy the only nav id name  'main nav' and replaces it with "menu-wrap" then save the template. 

Like example

<nav id='main nav'>

 Some templates cannot be found nav id. They are created with div class. Then go to edit HTML you have to find the main menu below option div class. Id = the same text with a space next to the div class then copy id name 'tm-menu' replaces with "menu-wrap" and save the template. 

Like example

<div class='tm-menu' id='tm-menu'>

May You Like: 14 POPULAR WEBSITES TO DOWNLOAD ROYALTY-FREE STOCK IMAGES FOR PERSONAL AND COMMERCIAL USE.

After all, processes complete carefully then your navigation bar is fixed or sticky. I hope you have read this article. And be able to use it with him. If there is any problem somewhere, you must comment, if you like it, share it with your friends.