BloggerBloggingScience-and-TechnologyWordPress

How To Create Sticky Navigation Bar in Blogger and WordPress

 

 

What is Navigation Bar Menu?

 

The navigation bar is the top section of any website. It is meant to make the navigation easy and help visitors get familiarized with the different sections of a blog. Another important benefit – that most of blogger don’t know – is that it is beneficial when it comes to SEO ( Search Engine Optimization ).

 

In this post you find answer to these recurrent questions:
  • How do I create a sticky navbar in WordPress?
  • How do I create a custom navigation bar in Blogger?
  • How do I use sticky menu?
  • How do I make my header sticky?

 

Advantages Of Fixed Menu In Blogger Templates

 

You may ask: what would a fixed menu add to my blog? Well! It is not an aesthetic and stylish add to any blog on search engines but it obviously has a bunch of rewards. Here are some:

 

  1. Makes your website WordPress or Blogger more user-friendly.
  2. Easier navigation for the visitors which eventually would spend more time on the content.
  3. Reduces bounce rates.
  4. An attention-grabbing sticky menu.
  5. Get a free responsive Mega Menu to your site by using the existing one.

 

How to Make Your Blogger Menu Float While Scrolling

If you want to keep your website menu sticky as you may have noticed it in Raqmedia.com, you just need a few lines of JavaScript implemnted into the HTML or source file if you are using WordPress or Joomla. Let’s start with Blogger as on the other platforms the task is easy to carry.

 

Create Sticky Navigation Bar in Blogger

 

Step 01: Prepare Your Template

 

First, follow these steps to get your template ready:

  1. Login to you Blogger dashboard.
  2. Always backup your template before making any changes.
  3. Head to Template then edit HTML.
  4. With Ctrl+C to copy and Ctrl+V to paste the following codes in their appropriate places.
  5. Search for the line of code ( </body> ) by hitting Ctrl+F
  6. Save your template and exit.

 

Step 02: Locate The Code

Now, search for the targeted line </body>. Paste the following code just above it.

 

Step 03: Add Sticky Navigation Bar Script

 

تثبيت القائمة الرئيسية في رأس القالب عند التمرير للأسفل

 

 

/* Star Ratings Rich Snippet in Google Search Results byhttp://www.raqmedia.com//*
< script type = ’text / javascript’ > $(document).ready(function() {
	var stickyWidgetTop = $(‘ < span style = ”color: red;” > < b > #nav < /b></span > ’).offset().top;
	var stickyWidget = function() {
		var scrollTop = $(window).scrollTop();
		if(scrollTop > stickyWidgetTop) {
			$(‘ < span style = ”color: red;” > < b > #nav < /b></span > ’).css({‘
				position’: ’fixed’,
				’top’: 0,
				’z - index’: 9999
			});
		} else {
			$(‘ < span style = ”color: red;” > < b > #nav < /b></span > ’).css({‘
				position’: ’relative’,
				’width’: ’100 % ’
			});
		}
	};
	stickyWidget();
	$(window).scroll(function() {
		stickyWidget();
	});
}) < /script>

 

Important Notice About Blogger Widget

 

Note: Change the class id – highlighted with red color – with the correspondent menu id of your template. You may find other terms like Header or main-menu. The script may not work if your Blogger template does not support it. If so change the template and try again!!

 

How to Create a Sticky Navigation Menu in WordPress

 

These WordPress free plugins will easily let you stick any element including menu or header at the top of the page as you scroll down and up. They create a floating sticky menu in few clicks. Raqmedia has reviewed the most popular ones. Here are some of the best free plugins that we recommend:

 

 

Congratulations! Now you can start using the sticky menu to navigate through you site whether in Blogger or WordPress. You may need to try all the plugins to select the one that suits your site. If you face any problems or find ways to improve this script or better WordPress Plugins, do share your thoughts and feedback.

 

We love to hear from you 😊💗.

 


إشترك في قناتنا على اليوتيوب وتوصل بأحدث الدروس والشروحات أولا بأول

🔔 Subscribe to our channel to get Exclusive & free tech tips & hacks 🔔



👍 Follow Our Facebook page to get latest updates 👍
🤩👇👇👇👇🤩

You May Also Like - قد يعجبك أيضا

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Ad Blocker Detected :(

Please consider supporting us by disabling your ad blocker.

من فضلك قم بتعطيل أداة مانع الإعلانات أدبلوك من المتصفح للدخول لموقع إنجليعز أو إستخدم متصفح آخر
شكرا لتفهمك وزيارتك