myStickymenu

myStickymenu – Simple sticky (fixed on top) menu for WordPress navigation

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.

myStickymenu is based on javascript which will add .myfixed css class to any predefined class after scroll by default. For example with default .navbar class:

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

will become

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

after scroll.

This way we can have custom css style for sticky (.myfixed) class. More about custom styles…

Please note on plugin update: After plugin update go to mystickymenu plugin settings and save changes with desired value for a new parameters ( v1.6 – “Make visible when scroled” ). Clear cache if some cache system used on your site.

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).mystickymenu settings

myStickymenu will change some of Twenty Thirteen defaults:
- disables default WordPress more link that jump on the middle of the page (otherwise menu will cover beginning of a read more text). In this way more link will be opened as any other page or post without of necessary anchor style jumping .
- changes Twenty Thirteen “fixed” adminbar (#wpadminbar)  when logged in on frontpage to “absolute” so it goes away with a scroll. This way myStickymenu can be transparent without of overlapping with admin bar  (This only affects logged in users of Twenty Thirteen theme.) Since version 1.3 there is admin setting to disable this option for themes without of admin bar in front page.

Download myStickymenu from WordPress repository

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

Original java script used in this plugin is taken from http://jsbin.com/omanut/2/edit

27 thoughts on “myStickymenu – Simple sticky (fixed on top) menu for WordPress navigation

  1. Hi

    I download your plugin and I love how simple it is.

    I have a site that I’m busy developing for my company and I’m using a WP Advocate theme by WP Dev Shed that I have made a child theme of for my site. I am a wp beginner.

    I managed to get the menu to stick, but I don’t know how to make it that same width as the theme menu or get the menu titles to line up. The title are on the left side and there is no margin. I want to make it act like the one on your site.

    Please could you help me. I can include screen shots when you reply to my comment.

    Thank you,

  2. Thank you for the help

    That worked now the menu is moved more to the centre of the page.

    Now i just need to figure out how to make the menu span the page and make the menu jump, but make it look seamless.

    I would really appreciate some more of your help with this.

    1. I’m not sure if I understand you, I tested it on a default WP Advocate theme and everything seems to work normal except background color, actually background image, while sticky (which is a easy css fix using .myfixed {background-image: none !important;} ).

  3. Hi there!

    I am not much good with code, but I managed to get your sticky menu to work on a test site. Unfortunately I can’t seem to figure out how to get it centered.

    I am so close to having this work that it is killing me. If you could please help me with this, I would be grateful.

    One thing to note is that I created the site in a program called Artisteer. it is a theme building program.

  4. Sorry – should have mentioned that the test site is the one I included in my info.

    Thank you for any help you can offer!

    Dave

      1. Thank you but it didn’t work at all – not even the mostly-functioning sticky menu I was getting earlier. I sent you an email in return.

  5. As I mentioned elsewhere on this site, this plugin is working excellent with Damir’s help using the new Beta version.

    Thank you, Damir, for helping me out!

  6. its a great plugin, but is there a way to …

    1. set margins that keep the menu above content (not starting all the way at the left)
    2. choose a custom menu
    3. add custom items like social icons and search bar ect..

  7. Thanks Chase,

    1. I’m working on a new version which should fix menu that starting all the way left on some themes (I can send u new version if u wanna test it?)
    2. Plugin is ment to be used for top menus and headers only, by manually choosing style class that should be sticky.
    3. Basically everything that is in selected menu will be in sticky menu too, myStickymenu is just a copy of class selected. Anyway I’ll think about it lill more to see what I can do.

  8. Maybe just a drop down to select a menu from the list of available menus. that way you can incorporate different things in this menu than the header (ie, social icons ect…)

  9. Hi!

    Is there any way to fix the menu at the bottom of the screen by default and have it scroll down automatically (but always stick to the bottom, regardless of the screensize)?

    Cheers!

    Liv

    1. Hi, it’s not possible to stick it in the bottom with current plugin code although it should be possible with some plugin modifications and some custom css code… anyway, thanx for your interest, I’ll think about this option in future releases.

  10. I love the plugin, it works perfectly on MAC/PC, also on my iPad, but unfortunately on the iPhone the Menu is NOT sticky… (I chose the div wich contains the menus (both normal and mobile) to be sticky)
    Ist here any way to get it work on iPhone/other smartphones as well??
    Thanks!

    1. Sorry, just realized there’s an option in the settings to disable it for mobile devices ;)) Sorry, great plugin!!

  11. That was so easy – fitted in straight away with the look and positioning of my navbar, all I had to do was change the background colour! Thank you.

    1. Thanks for your suggestion, I think you could achieve that with some custom CSS code inside mystickymenu settings

  12. Hello,

    thanks for the great plugin :)

    How can I have another background when it scrolls down? My normal menu is similar to black and the background from the sticky menu shows only left and right. But I want it just like you, first f.e. grey/white and then another colour on the complete width,

    Sorry for my bad english :(

    Greetings,
    Carry

    1. As far as I can see you should try to add code like this to “.myfixed css class” field (in Settings / myStickymenu)

      .myfixed .menu-primary-wrap {
      background-color:#ccc;
      }

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>