Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu

Description

Use myStickymenu to create a beautiful notification bar for your website. You can also use this sticky menu plugin will make your menu or header sticky on top of page, after desired number of pixels when scrolled. You can use it also to create a Welcome bar for announcements, promotion and more. This lightweight plugin will help your visitors navigate easily and reach to the navigation menu without wasting time. Install My Sticky Menu and improve your website’s user experience! If you want to change the CSS style, disable on scroll down or disable on specific pages. check out the Pro version.

By default, myStickymenu should make your menu sticky without any adjustments on your end – which means your menu should become sticky right out of the box. Sticky menu is designed to use element class « .navbar » as « Sticky Class ». That value should be modified in plugin settings for different themes to make it work. Sticky Class is actually nothing more than an element class (or id) of the element that should become sticky.

📢 Welcome Bar: Use this powerful feature to create a beautiful floating sticky notification bar. No coding skill required, just turn it on, set up your announcement text and button, and voilà – your top notification bar is good to go!

Informez vos visiteurs des actualités de votre entreprise avec le Coronavirus COVID-19 – en raison de la dernière épidémie de Coronavirus COVID-19, de nombreux utilisateurs utilisent la barre de bienvenue pour annoncer les actualités du Coronavirus COVID-19. Vous pouvez utiliser la barre de notification comme bannière Corona Virus – COVID-19 pour vous assurer que vos visiteurs sont informés.

Avec plus de 80 000 installations actives et environ 100 avis cinq étoiles, vous pouvez être sûr que My Sticky Menu est la bonne solution pour votre site Web.

AVANTAGES

  • Improve user experience by letting your visitors access the navigation menu and navigate to the pages they want when they want to.
  • Make your website look more modern with the sticky menu on desktop and mobile.
  • Increase number of pageviews and visitors’ time on your website
  • Create your own floating Welcome Bar and let your visitors know about your latest deals, announcements, or any other important information
  • Our MSM dashboard makes it easy for you to manage your top bars and sticky menus in one place!

The sticky header function is localized (multi-language support) and responsive (as far as your theme is). Also, there is the possibility to add custom CSS code which makes this plugin very flexible, customizable, and user-friendly. You can also use the notification bar in any language.

My Sticky Menu plugin is originally designed for Twenty Thirteen template but should work on any theme, like OceanWP, Nirvana Template, Travelify, Twenty Sixteen, Twenty Ten, Twenty Eleven, Max Magazine, Graduate, Lawyer theme, Spacious, Suits, and more.

My Sticky Menu is tested and compatible with Elementor website builder, Divi, WPBakery, Gutenberg, Visual composer, Beaver, and other WordPress website builders.

WITH WELCOME BAR FEATURES YOU CAN:

  • Display your floating bar at the top position
  • When the user clicks on the welcome bar button you can close the bar, redirect to another URL, or launch a Poptin pop up
  • Change the background and button colors for your hello bar
  • Change display frequency after submission – show the announcement bar on every page, once a visit, or don’t show the announcement bar after it’s submitted
  • Ajoutez un effet visuel au bouton et augmentez la conversion et le CTR
  • New! Add any custom HTML to your notification bar including strong, underline, italic, and much more. Use custom HTML to create a beautiful notification bar
  • Modifier la taille et la famille des polices
  • Définissez votre propre texte et le texte du bouton
  • Afficher le X de fermeture sur ordinateur/mobile
  • Afficher le bouton dans votre barre de notification supérieure sur ordinateur/mobile
  • Redirigez vos visiteurs vers une autre URL sur clic

AVEC MYSTICKYMENU, VOUS POUVEZ :

  • Show sticky header on scroll down/up
  • Effet de fondu ou de glissement
  • Disable at a small screen
  • Choisissez quand rendre visible sur défilement
  • Changer la couleur de la police lorsque le menu est épinglé
  • Changer la couleur de l’arrière-plan
  • Change the opacity
  • Changer le temps de transition épinglé
  • Define the z-index of the sticky header
  • Set an entrance effect for your sticky menu
  • Write your notification bar announcements in different languages – we support both LTR and RTL formats
  • NEW! New and improved dashboard – The new MSM dashboard will help you manage your notification bars, top bars, and sticky menus better.
  • NEW! Disable the sticky menu – You now have the option to disable sticky menu features if you want to use only top bars or welcome bars.

Fonctionnalités de la barre de bienvenue PRO

  • Multi Welcome Bar – Create a separate notification bar for different pages based on page targeting rules (E.g. separate notification bar for different languages, different product categories, and much more)
  • NEW! Countdown timer ⏳ – Add a countdown timer in your notification bar for that much-needed sense of urgency. This new countdown timer notifications bar feature can really increase your conversion rate because it creates a sense of scarcity and urgency on your promotions.
  • Display your floating bar at the bottom position
  • Modifier la hauteur de la barre de notification fixe
  • Ouvrir le lien de redirection dans un nouvel onglet
  • Affichez votre barre de notification uniquement sur mobile ou ordinateur
  • Show your notification bar on a scroll or after a few seconds
  • Set an expiry date for your welcome bar, including settings a timezone
  • Affichez votre barre de notification flottante sur des pages spécifiques
  • You can set a thank you screen which appears after the button is clicked (can be used for coupons or any other message you want to show your visitors after they click on the button)
  • Add a rel Attribute to your notification bar button

Mais attendez, il y a mieux 😉

QU’OBTENEZ-VOUS DANS LE PLAN PRO

  • Désactiver le menu flottant sur bureau/mobile
  • Désactiver le menu flottant lors du défilement bas
  • Add CSS style to the floating header
  • Disable/enable floating header on specific pages

>>> See Pro plans here

Démo en ligne

A live demo for myStickymenu plugin and notification bar is available at Premio’s demo site.

myStickyMenu EST COMPATIBLE RGPD

We don’t store any local data about your visitors. Any time your menu or notification bar appears on your site, the plugin will not store any local data about it.
Pro tip: You can the plugin’s notification bar to let your website visitors know about your cookie policy 🙂

Témoignages

« Works great.
One of the key elements that I consider when choosing a theme is the sticky menu option. If the theme doesn’t have it normally I don’t use it. But now that’s not a problem for me anymore. »

« This plugin rocks!
This plugin does exactly what it should. It is simple but powerful. I would suggest to anyone who wants to make their navigation menu sticky! I especially love the hide header on scroll down, show on scroll up feature that is built it. Great work!

Captures d’écran

  • Check out the welcome bar in action
  • The notification bar and sticky menu dashboard
  • Add a countdown timer to your notification bar to create an urgency sense
  • Concevez votre barre de bienvenue
  • Add your custom CSS
  • Vous pouvez choisir votre menu actuel à partir du menu déroulant ou inscrire une ID ou classe manuellement
  • Vous pouvez modifier le texte d’arrière-plan, le texte du bouton, les polices et les couleurs.
  • C’est ainsi que myStickyMenu sera réellement affiché sur votre site

Installation

After you activate the plugin, you should be able to create your first notification bar with ease, just customize the appearance and save it. If you want to create a sticky menu, in most cases the plugin should be able to find the class/ID for the menu, if not then change sticky class/id to .your_navbar_class or #your_navbar_id – you might need to purge the cache after saving.

For example:

Celestial-Lite (sticky header)
** Sticky Class => #branding
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .myfixed #site-navigation { margin-top:0px!important; } .myfixed #logo img {width: 200px;}

Thème Church
** Sticky Class => #menu-hauptnavi

Customizr Theme
** Sticky Class => .row-fluid (for header) or .nav (for menu)

CyberChimps
** Sticky Class => .navbar-inner

Decode
** Sticky Class => .header-menu
** Make visible when Scrolled after => 370
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; padding-top:5px; padding-bottom:5px; }

Genesis / Dynamik Theme
** Sticky Class(sticky header) =>.site-header
** Sticky Class(sticky menu) =>.nav-primary

Graduate
** Sticky Class => .main-navigation

Graphene
** Sticky Class => #header-menu-wrap

Illdy
** Sticky Class => .top-header
** Disable at Small Screen Sizes => 993

Illdy (mobile support)
** Sticky Class => .header-blog
** CSS Style => #mysticky-nav .myfixed { margin:0 auto; float:none; border:0px; background:none; max-width:100%; } .myfixed .bottom-header {display:none;}

Lawyer theme
** Sticky Class => .wrapper
** .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .myfixed { padding-left: 0px; padding-bottom: 0px; padding-top: 0px; } .wrapfixed { -webkit-box-shadow: 0 8px 6px -6px rgba(68,68,68,0.6); -moz-box-shadow: 0 8px 6px -6px rgba(68,68,68,0.6); box-shadow: 0 8px 6px -6px rgba(68,68,68,0.6); } .myfixed .logo img { max-height: 45px; } .myfixed .quick-info { display: none; } .myfixed .mainmenu { margin: 0px } .myfixed .mainmenu { padding-top: 7px; }

Max Magazine
** Sticky Class => #nav
** Make visible when Scrolled after => 250
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } #nav { min-height:40px!important; }

Naturo Lite
** Sticky Class => .header-inner

Thème Nirvana
** Sticky Class => #access

OceanWP
** Sticky Class => #site-header

Responsive
** Sticky Class => .main-nav
** Make visible when Scrolled after => 250
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; max-width:100%!important;} .myfixed .menu { background:none!important;}

Spacious
** Sticky Class => #masthead (sticky header)
** Make visible when Scrolled after => 250
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; max-width:100%!important;} .myfixed #site-description { display:none;} .myfixed #site-title a { font-size: 24px; } .myfixed #header-text { padding:0px!important;} .myfixed .main-navigation { padding-top: 0px!important; }

Storefront
** Sticky Class => .main-navigation

Suits
** Sticky Class => .navbar

Tempera Template
** Sticky Class => .menu

Travelify
** Sticky Class => #main-nav

Twenty Sixteen
** Sticky Class => .site-header-main

Twenty Ten
** Sticky Class => .menu
** Make visible when Scrolled after => 370
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .menu {min-height:38px;}

Twenty Eleven
** Sticky Class => #access
** Make visible when Scrolled after => 600
** .myfixed css class => .myfixed { float:none!important; max-width:100%;}
.myfixed .menu { background-color:none; float:left; }
.myfixed div { margin: 0px!important ; padding: 0px 7.6%; }

Twenty Eleven (add search to sticky menu bar)
** Sticky Class => #branding
** Make visible when Scrolled after => 600
** .myfixed css class => .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .myfixed a {display:none;} #mysticky-wrap {min-height:500px;} .myfixed #site-title, .myfixed #site-description{display:none;} .myfixed #access { margin: 0px auto 0px; } .myfixed #searchform { top: 0.3em!important; }

Twenty Twelve
** Sticky Class => .nav-menu
** Make visible when Scrolled after => 250

Twenty Thirteen (sticky header – add your own custom logo image and edit to suite your needs)
** Sticky Class => #masthead
** .myfixed css class => .myfixed { margin:0 auto; max-width:1070px; width:100%!important;} .myfixed .search-form, .myfixed .site-description, .myfixed .site-title { display:none;} .myfixed .home-link { max-width: 55px; min-height: 38px; margin-left:20px; float:left; background-image: url(‘logo.png’); } .myfixed .navbar { max-width:645px; float:right;} .wrapfixed .navbar { background-color: transparent; } .wrapfixed ul { padding-right:0px; }

Thème Webnus netStudio
** Sticky Class =>.nav-wrap2

Weblizar
** Sticky Class => .row

Wrock Metro Theme (entire header)
** Sticky Class =>#navigation

FAQ

Comment trouver la classe CSS à épingler, que dois-je saisir ici ?

So this depends on what you want to make sticky and what theme do you use, but for example, if you want your menu to be sticky, then you can examine the code (in firefox right click and “View page source”) and find HTML element in which your menu is situated. This element has some class or id, and that’s the Sticky Class we need. If using class then don’t forget to ad dot (.) in front of the class name or hash (#) in front of id. Twenty Thirteen default working class is « .navbar » without of quotes.

Existe-t-il un moyen de limiter la largeur à la largeur de l’en-tête, plutôt que d’être pleine largeur ?

Yes, just leave the « Sticky Background Color » field blank (clear). Then if needed define a custom background color for a sticky header inside « .myfixed CSS class » field using .myfixed class.

Ho do I add a small logo to the menu?

That will depend on a theme you use, but if initially your menu and logo are in one div then you can use that div class or id in myStickymenu settings.

If not you can change that in your header template file and add logo and menu divs inside new div with some custom class or id, then use that class or id in myStickymenu settings as a sticky class.

In CSS you can style your custom class while not sticky using the custom class you added before. Furthermore, you can style your menu while sticky using .myfixed class which is added by js to your custom class while sticky is active.

In some cases, you can use the whole header div and then just style it differently with .myfixed class, hide what you don’t need to use CSS display:none; property, and position logo and menu as you like.

Y a-t-il une limite de temps pour la version gratuite ?

Non, vous pouvez utiliser le plan gratuit tant que vous voulez.

Can I use My Sticky Menu plugin on more than 1 domain?

There 2 ways to do it:
1. You can install the free Sticky Menu plugin on any website you want
2. You can buy the Pro plan that includes licenses for 5 domains, or the Agency plan that includes licenses for 20 domains.
Check out our plans page.

How long is my paid Sticky Menu plugin license valid for?

Once you purchase any paid plan of my sticky menu, you can use it forever. Support and updates are available for 1 year. You can renew your license each year to get another year of support and updates.

Will Sticky Menu plugin stop working if I don’t renew my license?

Of course NOT! 🙂
Your Sticky Menu plugin and all your settings will continue to work as before; however, you will no longer receive plugin updates including feature additions, improvements, and support.

How do I activate my pro plan?

Il suffit de suivre notre guide d’installation PRO.

Y at-il une démo en direct pour myStickyMenu ?

A live demo for myStickymenu plugin is available at Premio’s demo site.

Comment fonctionne la barre de bienvenue et dois-je l’activer ?

Après l’installation de l’extension, vous aurez la possibilité d’activer la barre de bienvenue. Vous pouvez créer une barre flottante qui apparaîtra sur votre site, et l’utiliser pour la promotion, les annonces, et plus encore. Vous pouvez ne pas à activer cette fonctionnalité si vous ne le souhaitez pas.

Avis

17 mai 2022
Great plugin with intuitive interface and settings. Works great and support was very helpful during setup process.
12 mai 2022
I had a problem with this plugin agreeing with an old theme and so I disabled it and tried a bunch of different ones all with the same problem. But support reached out to ME because I left a note when I disabled it. Crazy - we got it working in no time. Some custom CSS was interfering with the display. Super pleased!
12 mai 2022
I downloaded this plugin today to add a sticky bar to my website to promote a new book that launches tomorrow. Initially, I created the sticky bar but couldn't figure out how to link the page. A quick email that was answered within 30 mins resolved the challenge I had and now it's working perfectly. Great plugin and great service Thanks Tony
10 mai 2022
Highly recommend the stickymenu plugin. All the features we needed and settings to turn off certain section for example keep the top notification bar but turn off menu, so it was perfect for us. I also have to HIGHLY COMMEND THEIR SUPPORT as well as we had a problem (which was user error) and they were straight there to deal with it and went above and beyond to resolve the issue quickly which they did. First class 5 stars
Lire les 872 avis

Contributeurs & développeurs

« Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.

Contributeurs

“Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu” a été traduit dans 9 locales. Remerciez l’équipe de traduction pour ses contributions.

Traduisez « Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu » dans votre langue.

Le développement vous intéresse ?

Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.

Journal

2.5.8

Plans text change

2.5.7

Improvement: Better support for languages that read from right to left (like Hebrew or Arabic)
Improvement: We’ve also added inherit & system stack font options to give you flexibility when it comes to font choices on your menu bar.
Improvement: New MSM dashboard to help you manage your top bars and sticky menus better.
Improvement: Disabling sticky menu features – you can now disable the sticky menu feature if you want to use top bars only
Improvement:
Fixed: Optimized the JS and fix “console.log” on mystickymenu.js bug

For Pro plan users:
Added: You can now put countdown timers on your sticky menu! Best used for promotions or launch announcements!

2.5.6

Z-index welcome bar fix

2.5.5

Fixed notification bar & WordPress admin panel bar overlap bug

2.5.4

Poptin support was added, you can now launch Poptin pop ups

2.5.3

Support route changed

2.5.2

Bugs fixed

2.5.1

WordPress 5.7 adjustments

2.5

Better instructions for the sticky menu feature & explainer video

2.4.9

Mobile bug fixed

2.4.8

JQuery bug fixed

2.4.7

Background color fix

2.4.6

Height fix

2.4.5

Background color fix

2.4.4

New entrance effects and bug fixes

2.4.3

Infrastructure changes

2.4.2

iPhone and iPad notification bar and sticky menu frontend issues fixed

2.4.1

Suppression du crédit

2.4

You can now change the sticky menu font color when the menu is sticky. We’ve also fixed a resize issue and a Divi gap bug

2.3.9

Correction de la barre de notification

2.3.8

Vous pouvez maintenant ajouter du code HTML personnalisé votre barre de notification

2.3.7

Modifier la fréquence de la barre de bienvenue

2.3.6

Compatibilité avec WP 5.4 et correction de la barre de bienvenue

2.3.5

Examiner le changement

2.3.4

Corrections

2.3.3

Légères corrections CSS

2.3.2

Correction de bogues mineurs

2.3.1

Si le menu fixe est activé et que la barre de bienvenue est désactivée, les polices Google ne sont pas téléchargées

2.3

Fixed some appearance issues

2.2.9

Prise en charge de plusieurs lignes pour la barre de bienvenue

2.2.8

WP-admin submit button styling bug fixed

2.2.7

Added attention effects for the button

2.2.6

Amélioration des entrées

2.2.5

myStickyMenu fonctionne maintenant out-of-the-box avec les thèmes suivants (ce qui signifie que vous n’avez pas besoin de trouver la classe de votre menu, il devrait fonctionner juste après l’installation) : Twenty Nineteen, Twenty Seventeen, Hello Elementor, OceanWP, Astra, Storefront, Twenty Sixteen, Neve, Hestia, Sydney, Shapely, GeneratePress, Mesmerize, Ashe et Total. Nous avons également ajouté la compatibilité Google Lighthouse.

2.2.4

Transition plus fluide lorsque le menu fixe disparaît

2.2.3

Modifications de la version PRO

2.2.2

Fixed apostrophes bug for Welcome bar

2.2.1

Menu fixe et correction du conflit de la barre de bienvenue

2.2

Vous pouvez maintenant ajouter une barre de bienvenue à votre site Web

2.1.8

Actualiser page sur mise à niveau

2.1.7

Index indéfinis fixés

2.1.6

Saving issue bug fixed

2.1.5

Mise à jour de sécurité

2.1.4

Correction de quelques problèmes de création de page

2.1.3

Fixed variable output warnings bugs

2.1.2

Actualiser la page sur changement

2.1.1

  • Added a testimonial

2.1

  • Interface utilisateur nouvelle et simplifiée, vous pouvez maintenant sélectionner votre menu dans une liste déroulante

2.0.6

  • Fixed: Enable / Disable at 404 page

2.0.5

  • Added: Admin settings sidebar right
  • Added: Admin separated js script
  • Added: Admin separated css script

2.0.4

  • Added: Hide for large screens

2.0.3

  • Fixed: Missing bg color field

2.0.1

  • Fixed: If user logged in but admin bar is not showing (error to calculate activation height)
  • Fixed: Admin style conflict with Scripts n Styles plugin

2.0

  • Added: If Make visible on Scroll is set to 0 automatic activation and deactivation scroll height will be used (useful for responsive designs).
  • Added: Tabs for settings.
  • Added: option to disable on scroll down (show only on scroll up).
  • Added: Class .up and .down on scroll up or down.
  • Added: Reset to default settings.
  • Added: remove myStickymenu settings on plugin uninstall.
  • Added: index.php to plugin root to prevent directory browsing.
  • Fixed: If sticky menu class does not exist (null or undefined), it will show console log instead of error.
  • Fixed: slide effect now slides on deactivate as well.
  • Fixed: admin bar overlap for screens less than 600 px wide.

1.9.1

  • Changed: admin bar is fixed as default, and menu goes under it.

1.9

  • Fixed: enable / disable for search pages.

1.8.9

  • Added: New option – Disable at certain posts and pages.

1.8.8

  • Fixed: removed esc_attr for echo css, since input is already sanitized.

1.8.7

  • Fixed: minor bug when browser resized.

1.8.6

  • Fixed: minor bug.

1.8.5

  • Improved: Improved performance and optimized scripts.

1.8.4

  • Fixed: changed is_home() to is_front_page() for menu activation height on front page.

1.8.3

  • Change: minor cosmetic changes…

1.8.2

  • Fixed: js load on https

1.8.1

  • Added: “Disable CSS“. If you plan to add style manually to your style.css in order to improve your site performance disable plugin CSS style printed by default in document head element.
  • Mystickymenu.js est réduit pour améliorer les performances.

1.8

  • Added: « Make visible when scrolled on Homepage » after number of pixels. Now it’s possible to have one activation height for home page and another for the rest of the pages.
  • Ajout de la langue allemande

1.7

  • Ajout de la prise en charge multilingue (localisation).
  • Langues ajoutées – anglais (par défaut), espagnol, serbe et croate.
  • Ajout du script sélecteur de couleurs Iris.
  • Fixed jumping of page on scroll while menu is activated (height is defined before scroll event).
  • mystickymenu.js déplacé vers le dossier js

1.6

  • Added: « Make visible when scroled » after number of pixels option.
  • Fixed opacity 100 bug.

1.5

  • Added option to enter exact width in px when sticky menu should be disabled « Disable at Small Screen Sizes ».
  • Added “.myfixed css class” setting field – edit .myfixed css style via plugin settings to create custom style.
  • Fixed google adsense clash and undefined index notice.
  • is_user_logged_in instead of old “Remove CSS Rules for Static Admin Bar while Sticky” option

1.4

  • Added fade in or slide down effect settings field for sticky class.
  • Added new wrapped div around selected sticky class with id mysticky_wrap which should make menu works smoother and extend theme support.

1.3

  • Added « block direct access » to the mystickymenu plugin file (for security sake).
  • Added Enable / Disable at small screen sizes and Remove not necessary css for all themes without admin bar on front page.
  • Added “margin-top :0px” to .myfixed class in head which should extend theme support.

1.2

  • Correction de mystickymenu.js pour les navigateurs IE, donc myStickymenu est maintenant compatible avec IE 10, 11

1.1

  • Added administration options, now available through Dashboard / Settings / myStickymenu. Options are as follows: Sticky Class, Sticky z-index, Sticky Width, Sticky Background Color, Sticky Opacity, Sticky Transition Time.
  • Old mystickymenu.css file is deprecated and not in use anymore.

1.0

  • First release of myStickymenu plugin