Table of Contents
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:
- Makes your website WordPress or Blogger more user-friendly.
- Easier navigation for the visitors which eventually would spend more time on the content.
- Reduces bounce rates.
- An attention-grabbing sticky menu.
- 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.
Step 01: Prepare Your Template
First, follow these steps to get your template ready:
- Login to you Blogger dashboard.
- Always backup your template before making any changes.
- Head to Template then edit HTML.
- With Ctrl+C to copy and Ctrl+V to paste the following codes in their appropriate places.
- Search for the line of code ( </body> ) by hitting Ctrl+F
- Save your template and exit.
Step 02: Locate The Code
Now, search for the targeted line </body>. Paste the following code just above it.
تثبيت القائمة الرئيسية في رأس القالب عند التمرير للأسفل
/* Star Ratings Rich Snippet in Google Search Results byhttps://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!!
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 ????????.
???? 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)
Thank you! so much!
worked really well!
???? ???? ????
📌 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: https://www.raqmedia.com/how-to-create-sticky-navigation-bar/
📜 Don’t miss this game-changing tip – Follow, Like, and share the knowledge!
👍💡
#raqmedia #StickyNavigation #WebsiteImprovement #SEOtips #BloggerGuide #WordPressTricks #UserExperience #DigitalMarketing