myStickymenu, Simple sticky (fixed on top) menu

This lightweight WordPress plugin will made your menu sticky on top of page. You can see this very plugin in action on this website, just scroll your mouse up and down and notice that menu is following your scroll.

Plugin is designed to work with Twenty Thirteen theme, but should work on any theme. It’s using .navbar css class by default, and that’s the only thing that need to be modified for other themes to make it work. Inspect your code to find appropriate menu/navigation bar class or id. Go to Settings / myStickymenu and change Sticky Class to .your_navbar_class or #your_navbar_id.

Plugin will add two additional div elements and it will nest selected element inside. It will calculate initial height and it will use it for placeholder and wrapper element “#mysticky-wrap” to prevent jump of the page while sticky menu is activated. Second div element #mysticky-nav is used to position the sticky menu, add top position when admin bar is showed, as well as when slide effect is used to make it slide in and out. and at the end we have .myfixed css class which is added to our original element defined by “Sticky class”.

For example:

<div id="navbar" class="navbar"></div>

Will become:

<div id="mysticky-wrap">
   <div id="mysticky-nav" style="top: 0px;">
      <div id="navbar" class="navbar"></div>
   </div>
</div>

And than, on scroll down when activation height is reached:

<div id="mysticky-wrap" style="height: 45px;">
   <div id="mysticky-nav" class="down wrapfixed" style="top: 0px;">
      <div id="navbar" class="navbar myfixed" style="width: 1598px;">
      </div>
   </div>
</div>

At the end, on scroll up we have:

<div id="mysticky-wrap" style="height: 45px;">
   <div id="mysticky-nav" class="up wrapfixed" style="top: 0px;">
      <div id="navbar" class="navbar myfixed" style="width: 1598px;">
      </div>
   </div>
</div>

This way we can have custom css style for sticky (.myfixed and .wrapfixed) classes, as well as .up and .down classes if we wanna style menu differently on scroll up or down More about custom styles…

Download from WordPress

Tabbed settings

Settings are grouped into three tabs, General Settings, Style and Advanced.

Automatic activation

This option will be activated if “Make visible on scroll” option is set to 0. 0 is used as default setting for all new installations.

With this option fade effect will behave as push, when sticky menu hit browser top it will start to push it down, and when deactivated, menu will fit to its original position. This will work good only when initial menu is same as sticky menu, otherwise transition will not be smooth.

Slide effect will work after, when menu is scrolled out of browsers top view so it can be used in both cases, when initial menu is same or different as sticky menu.

Disable on scroll down

This new option disables sticky menu on scroll down, its showed only when scroll up. Used with automatic activation it behave as slide in on scroll up and fit into position

Up and Down classes

Menu can be styled different on scroll down or up. Class .up is added on scroll up, and .down is added on scroll down. Use “CSS Style” field to style it as you wish (#mysticky-nav.wrapfixed.up or #mysticky-nav.wrapfixed.down).

Reset to default settings

It will reset settings to defaults, write down your previous settings before using this option unless it’s a new install.

Please note on plugin update: Clear cache if some cache system used on your site.

Version 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.

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

Version 1.8.3
– Change: minor cosmetic changes…

Version 1.8.2
– Fixed: js load on https websites

Version 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. More about this option and how to use it.
– Minimized mystickymenu.js (mystickymenu.min.js) to improve performance.

Version 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.
– Added German language.

Version 1.7
– Added multi language support (localization).
– Added languages – English (default), Spanish, Serbian and Croatian.
– Added Iris color picker script.
– Fixed jumping of page on scroll while menu is activated (height is defined before scroll event).
– mystickymenu.js moved to js folder

Version 1.6
– new administration setting: “Make visible when scroled” after number of pixels.
– fixed opacity 100 (thanks to coleh3)

Version 1.5 – what’s new?
– “Disable at Small Screen Sizes” setting now have option to enter exact width in px when sticky menu should be disabled.
– new administration setting: “.myfixed css class” – edit .myfixed css style via plugin settings to create custom style.
– google adsense clash fix (thanks to Luigi).
– is_user_logged_in added instead of old “Remove CSS Rules for Static Admin Bar while Sticky” option (thanks to Dominik).
– fixed undefined index notice.

Version 1.4 – what’s new?
– new administration setting: fade in or slide down effect for sticky class.
– ads new wrapped div around selected sticky class with id mysticky_wrap which should make menu works smoother and extend theme support.

Version 1.3 – what’s new?
– block direct access to the mystickymenu plugin file (for security sake).
– 2 new administration settings: Enable / Disable at small screen sizes and Remove not necessary css for all themes without admin bar on front page.
– ads “margin-top :0px” to .myfixed class in head which should extend theme support.

Version 1.2 –  fix IE browser support
There is a minor fix in mystickymenu.js for IE browsers, so myStickymenu is now compatible with IE 10, 11  (thanks to Brandon who reported a bug). For now it’s confirmed that myStickymenu is compatible with all newer versions of: Firefox, Safari, Chrome, IE . I didn’t check older versions of browsers or other browsers yet. If you feel like it, please leave a comment  for other supported or unsupported versions and browsers bellow.

Version 1.1 is out!
New administration options are 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, so you can delete it from your plugin folder if you want. If you need old css rules from css file, you can copy them to your theme stylesheet manually (Sorry if I broke someones update, I’ll promise it won’t happen again).

For different themes check out myStickymenu theme support

…and please comment if you like it or have an idea how to improve it…

Some cool live website examples where plugin is active at the moment:
http://neveralonegame.com/
http://javierbarros.com/
http://www.top.me/
http://www.teshuvamusic.com/
http://dollyandluxe.com/

92 thoughts on “myStickymenu, Simple sticky (fixed on top) menu

  1. The plugin works fine (after trying ay others)! I’ve got only a minor flaw: the original menu font becomes bold. How to correct ? Thanx in advance!

  2. Hi,

    thanks for this amazing plugin. I’m using it on and on, for almost every website. 🙂

    I do have a question though: for a project I’d like to skip the menu in the header section. However the mysticky menu should appear while scrolling down. If I set it on “display:none”, it won’t show at all. What would be the correct CSS value?

    Many thanks for any help!

    Best
    Alex

  3. Hey,

    is it possible to make the menu bar fade-out (with the same animation as the fade-in) when you scroll back to the top again? It now jumps back up when I get near the top of the page.

    Thanks in advance!

  4. This is especially obvious if I reduce the window size, scroll, then increase the window size to reveal the menu again.

  5. Nice lightweight plugin! There’s one thing I noticed about the plugin on responsive sites. I haven’t actually dug into the code myself yet, so perhaps there’s an easy solution. This same bug also exists on this site with the menu. If I resize my window to below the breakpoint to mobile and the sticky menu disappears, when I resize the window back to larger, the menu’s layout is messed up. This is especially obvious if I reduce the window size, scroll, then increase the window size to reveal the menu again.

Leave a Reply

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