How To Create Sticky Navigation Bar in Blogger and WordPress How To Create Sticky Navigation Bar in Blogger and WordPress | RaQMedia | Complexity Simplified

How To Create Sticky Navigation Bar in Blogger and WordPress

SHARE:

You May Also Like


How to Make Menu Float While Scrolling

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 by http://www.raqmedia.com//*<script type='text/javascript'>$(document).ready(function(){var stickyWidgetTop=$('#nav').offset().top;var stickyWidget=function(){var scrollTop=$(window).scrollTop();if(scrollTop>stickyWidgetTop){$('#nav').css({'position':'fixed','top':0,'z-index':9999});}else{$('#nav').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:



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

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 😊💗.

COMMENTS

SHARE YOUR THOUGHTS: 2
  1. 🔔 A sticky menu or a fixed menu is a navigation bar that remains visible on a website even when a visitor scrolls up and down a page.
    (y)

    ReplyDelete
  2. Thank you! so much!
    worked really well!
    😊 😊 😊

    ReplyDelete
Thank you for taking time to comment. 😊 💙

🔔 If you're interested in more, have questions, or any constructive criticism, let us know in the comment section below!

⚠ Your email address will not be published. By using this form you agree with the storage and handling of your data by this website.

Name

Android,13,Android Apps,1,Apps,2,Around-The-World,14,Articles,11,Autos,4,Blogger,16,Blogging,32,Celebrities,9,Classroom-Ideas,4,Dictionaries,1,DIY,57,Earn-Money,10,English-Club,1,English-Exercises-Online,4,Entertainment,48,ESL-Games,6,Facebook,11,Freebies,5,Fun,21,Girls-stuff,41,Grammar,10,Health,35,Imaniat,66,Kids,44,Learn-Arabic,20,Learn-English,72,Lesson-Plans,1,Lifestyle,138,Listening,1,Methodology,13,Motivation,9,Mysteries,14,News,32,Online-Tools,4,Personality,2,Photoshop,8,Printables,25,Pronunciation,3,Qasas-ul-Anbiya,23,Qasas-ul-Quran,7,Quizzes,10,Rawae,18,Realities,17,Reviews,13,SEO,8,Services,3,Sira,24,Stories,1,Students-Corner,4,Teach-English,24,Tests,7,Travel,14,Tutorials,93,Vocabulary,40,Windows,5,Women,41,WordPress,8,Writing,1,YouTube,24,شروحات تقنية,16,
ltr
item
RaQMedia | Complexity Simplified: How To Create Sticky Navigation Bar in Blogger and WordPress
How To Create Sticky Navigation Bar in Blogger and WordPress
Make your website menu float while scrolling in WordPress or Blogger with free premium plugins in few clicks and optimize your SEO. Add fixed menu.
https://1.bp.blogspot.com/-l4rns4-iRS8/X5Hu3lYrN6I/AAAAAAAAI_M/z6YiqunWIcI9T2fOR6Ejxat-J_qiCmZ4gCLcBGAsYHQ/w320-h180/how-to-create-sticky-navigation-bar-in-Blogger-WordPress.webp
https://1.bp.blogspot.com/-l4rns4-iRS8/X5Hu3lYrN6I/AAAAAAAAI_M/z6YiqunWIcI9T2fOR6Ejxat-J_qiCmZ4gCLcBGAsYHQ/s72-w320-c-h180/how-to-create-sticky-navigation-bar-in-Blogger-WordPress.webp
RaQMedia | Complexity Simplified
https://www.raqmedia.com/2020/10/how-to-create-sticky-navigation-bar-in.html
https://www.raqmedia.com/
https://www.raqmedia.com/
https://www.raqmedia.com/2020/10/how-to-create-sticky-navigation-bar-in.html
true
5573019325017529632
UTF-8
Loaded All Posts No posts are found VIEW ALL Read more Reply Cancel reply Delete By Home PAGES POSTS View All You May Also Like - قد يعجبك أيضا LABEL ARCHIVE SEARCH ALL POSTS Sorry! No posts were found matching your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Click Here To Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Contents