mystickymenu sticky header

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.

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

For different themes check out myStickymenu theme support

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

Big thanks to Ogi Djuraskovic for Spanish and Serbian translations and Schelli for German translation. I would appreciate your help in translation for other languages (since version 1.7 there are translatable .mo and .po files included in plugin languages folder). Anyone willing to contribute is welcome.

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

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

  1. hi im using virtue theme and would like to fix the topbar which ive seemed to get working with your plugin, but cant get the logo which is an image ive placed, and the primary menu bar which sits under the logo, and also be fixed in the mobile part aswell

    thanks for your help.

  2. Great plugin! :)
    I’d like to make the Topbar sticky (using theme settings) and for the secondary navigation menu to be sticky beneath it (ie for it to float x px from the top, if x is the height of the topbar). Is that possible?
    Thanks
    Andrew

    1. Not sure, it depends on your sticky script used on theme, but if there is no conflict, than it should be possible with some extra css…

      1. hi Murdah i am using INOVADO Child them and i couldn’t able to make work mystickymenu could you help me please. i tried all div in there but couldn’t able to show ( My div id is header i think)

        Thank you

        youtam

        1. Inovado already have some kind of sticky menu…maybe that’s why isn’t working… and you can try #header-v6 or .header

  3. Great plugin. Works like a charm. I’d like the bar to be invisible on page load and fade in after XXpx scroll. Is that possible without having to fiddle around with java?

    KK

    1. I guess you could set up your menu transparent using css opacity, than just put back opacity on .wrapfixed element (on scroll).

  4. The sticky menu is displayed, but it’s not clickable.
    I’m using Graphene theme, set Sticky Class to .menu or #header-menu, both same problem.
    Help please. Thanks.

    1. I just tried it, and for me everything works fine in default Graphene theme. I used #header-menu as a sticky class. Maybe some other plugin or custom theme modifications causes this?

  5. I am to very much new to website development, i want to know the steps to add logo on the sticky meny as of yours and how could i edit the height of it’s and text fonts and boldness. Please do reply.

        1. Celestial-lite works quite good with “#branding” ID (without of quotes). You can use existing logo (your theme have option to add logo in header) and than style it more using .myfixed css class field…

          For example add this code after default css style in .myfixed css class field:
          .myfixed #site-navigation { margin-top:0px!important; } .myfixed #logo img {width: 150px;}

          1. Please Help, I am using the isis theme – I am also keen to have the above mentioned but am having trouble editing to allow the logo to appear small. I put the “#branding” as the sticky class and it gives me the full branding with big logo but I can’t seam to adjust the properties to make the logo smaller.

            I would like to have it with preferably a small logo to the side just like the one on your site, however will be fine if can only have a small logo above the menu.

            Thank you for your help

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>