This Guide has been replaced by the new UberMenu Knowledgebase

Please visit the Knowledgebase for the most up-to-date documentation. This page should redirect automatically

Introduction to UberMenu Sticky Menu Extension

Plugin: UberMenu Sticky Extension
Plugin by: Chris Mavricos, SevenSpark
Website: sevenspark.com
Created: January 22, 2013
Guide Last Updated: January 27, 2013

Welcome to UberMenu Sticky Extension! Thank you for purchasing this plugin, I appreciate it!

This guide should answer all your questions about how to use this plugin. You can browse the document using the navigation sidebar on the left, or search the entire document by using CTRL+F in your browser.

The latest version of this support guide can always be found here: UberMenu Sticky Extension Support Guide.

Getting Support

First, please take a moment to search this file, as the answer to your question is likely already in here. You can press CTRL+F in your browser and then search this entire page for keywords. Or, browse the topics in the navigation on the left. It's the fastest way to get the answer you need!

Please be polite when requesting support, and I'll be sure to respond as soon as possible. I'll do my best to answer your questions, but unfortunately I generally can't offer customizations beyond a few lines of code - there just aren't enought hours in the day! Of course, I will always provide fixes for any bugs that crop up as soon as can be :)

When requesting support, please indicate which product you are referring to, explain what you've already tried and provide a link to your site so I may see the issue firsthand. It's really the only way to efficiently diagnose a problem. Thanks!
I can't find my answer in this guide. Get Support →

To access the forum, please register both your UberMenu and UberMenu Sticky Extension Purchase Codes

Requirements

  1. WordPress 3.5+
  2. UberMenu 2.2.2.0+

Installation

Install the Plugin

WordPress Plugin Uploader

You can install UberMenu Sticky Extension via the WordPress plugin uploader without unzipping the download package.

  1. Log into your WordPress admin panel
  2. Navigate to Plugins > Add New
  3. Click Upload
  4. Click Choose File and select the UberMenu Sticky Extension download zip.
  5. Click Install Now.

FTP

You can also install UberMenu Sticky Extension via FTP

  1. Extract the .zip file you downloaded from CodeCanyon.
  2. Find the ubermenu-sticky folder (this directory is created when you unzip the file).
  3. Upload the ubermenu-sticky folder to your wp-content/plugins directory.
  4. Navigate to your Control Panel: Plugins
  5. Under UberMenu - Sticky Menu Extension, click Activate

What did this do?

Once you install the plugin, you'll get:

  • Any UberMenu currently on your site will automatically become sticky
  • A new Sticky Settings panel within the UberMenu Control Panel (Appearance > UberMenu)

Settings

Activating UberMenu Sticky Extension will automatically make your UberMenu sticky, however you can use the settings panel (Appearance > UberMenu > Sticky Settings) to tweak its appearance.

Sticky Settings Panel

Setting Purpose
Top Spacing If you want your sticky menu to stick to the absolute top of the window, leave this at 0. If you would like it to be vertically offset, increase the Top Spacing appropriately. If you set this to 20, the menu will stick 20 pixels from the top of the window.
Expand Menu Bar Full Width on Scroll By default, when your menu sticks the menu bar will expand to the full width of the screen. If you'd rather it did not, disable this.
Center Inner Menu Width If you have activated the Expand Menu Bar Full Width on Scroll option, you may want the menu items to still be contained within the content area of your site, rather than being aligned to the left of the window. Normally you would set this to the width of your content area.
Menu Bar Background If you are using a transparent background on your menu bar, you'll probably want to set a color for when the menu sticks. This makes it much easier to read the text while it is overlaid over other content.
Move WP Admin Bar to Footer The WordPress Admin Bar is also a sticky menu. If you have both at the top, they will overlap and one will become inaccessible. This setting moves your Admin bar to the bottom of the page and inverts its menus.
Apply Sticky To If you only want the menu to be sticky on a specific page, enter the post ID here

Special Classes

um-sticky-only

The um-sticky-only class allows you to have menu items that are only displayed when the menu is sticky (they will be hidden via CSS otherwise). Simply add the class to any menu item.

One way to use this would be to add a logo to your menu that only appears after the user has scrolled past your header

um-unsticky-only

The um-unsticky-only class allows you to have menu items that are only displayed when the menu is NOT sticky, and hidden via CSS otherwise while the menu is sticky. Simply add the class to any menu item.

ubermenu-sticky

When the menu is in the sticky state, it will be wrapped in this class. To write styles specifically for the sticky state of the menu, you can prefix your selectors with

							/* Menu Bar while in sticky mode */
							#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky{

							}

Frequently Asked Questions

My menu floats right normally, but when it turns sticky, it floats left - why?

Fixed positioning is much less flexible than relative or static positioning. Different browsers handle this differently. Your ability to float your menu right while it is sticky will be dependent on how your theme works. To accomplish this you will need to write custom CSS.

UberMenu Sticky specifically allows you to left-align or center the menu when it is sticky; the recommended solution is to use one of these positions rather than try to align it right.

The menu doesn't stick on scroll (It's not working!!)

Uh oh!

If everything else on your site is running properly, UberMenu Sticky Extension should run without issue. But if your menu isn't sticking as you scroll, there could be a few issues:

1. Javascript errors

If you have ANY javascript errors on your site, this can break the sticky functionality. That means if you've installed a theme or plugin that is misbehaving, this can cause trouble.

The same javascript errors that will break UberMenu will break UberMenu Sticky - it's just more obvious with UberMenu Sticky because a non-javascript sticky "fallback" is not possible. Please check out the UberMenu Troublshooter - javascript errors to troubleshoot your issue. The most common is an unrelated javascript error from another plugin/theme breaking things.

2. CSS Syntax Error

Check your CSS syntax in your UberMenu Control Panel's Custom CSS tweaks area. If you have a syntax error there, UberMenu Sticky's CSS won't get read and you won't get a sticky menu.

3. UberMenu Version

Remember, UberMenu Sticky requires UberMenu Version 2.2.2.0 or later. If you are using an earlier version, please upgrade in order to make your UberMenu compatible.

Credits

jQuery Waypoints

jQuery WayPoints plugin by imakewebthings