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, 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 by*
< 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 % ’
	$(window).scroll(function() {
}) < /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 ????????.


Other Popular Articles ...


  1. 📌 Ready to boost your website’s navigation? Learn how to create a sticky menu in WordPress and Blogger effortlessly!
    🚀 Enhance user experience, reduce bounce rates, and optimize your site for SEO. Check out the step-by-step guide here:
    📜 Don’t miss this game-changing tip – Follow, Like, and share the knowledge!

    #raqmedia #StickyNavigation #WebsiteImprovement #SEOtips #BloggerGuide #WordPressTricks #UserExperience #DigitalMarketing

Leave a Reply

Back to top button
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Sharing is caring

Ad Blocker Detected :(

Please consider supporting us by disabling your ad blocker.

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