Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PMM3 Fixed on Scroll OptionPVII is the leader in creative extensions for Dreamweaver

As of version 3.4.8, Pop Menu Magic 3 offers the option to set your menu to a fixed position. The positioning is programmed so that the menu is automatically converted to a fixed position when the page is scrolled and the top of the menu reaches the top of the page. This tutorial will show you how to customize the menu when it is in fixed mode.

Pop Menu Magic 3 Home | Examples | Buy ($95) | Upgrade from PMM2 ($65)

How to assign the option

The Fixed on Scroll option can be assigned when you create a menu or when you modify it. Simply check the box next to the label Fixed on Scroll.

The option can be set separately for any menu on your page.

A "classy" solution

When your menu converts to fixed, the PMM3 script assigns a special class, p7pm3-fixed, to the root menu DIV. This class can be used to customize how the menu looks when it is in fixed mode.

When is this useful?

Let's say you are using a PMM3 theme that does not assign a backgroud to the root container. Your page is designed for a menu root that is transparent, allowing the menu to pick up the background of an underlying container... or of the page itself. When such a menu converts to fixed, the menu is taken out of the page flow and, as content scrolls beneath it, the menu will be difficult to read. To address this, you would use the p7pm3-fixed class to assign a background to the menu that will render only when the menu is in fixed mode. The following example shows a default Boardroom-themed menu that is set to become fixed on scroll:

TEST PAGE 1

Notice how the menu becomes difficult to read when it becomes fixed.

We can fix this problem by adding this rule to the menu style sheet or the page style sheet:

.p7PM3-12.p7PM3.p7pm3-fixed {
background-color: #FFFFFF;
width: 94%;
margin-left: 3%;
margin-right: 3%;
border-radius: 0px 0px 5px 5px;
text-align: center;
box-shadow: 0px 0px 30px rgba(0,0,0,.5);
}

We set a background color. Width is set to 94% and left/right margins to 3% in order to offset the menu from the edges. Note that the width and the margins must equal 100%. We use border-radius to round the menu's bottom corners. We set alignment to center and assign a subtle shadow.

The result an be seen in this example:

TEST PAGE 2

You might be wondering why the class name is prefaced with the additional class names: .p7PM3-12.p7PM3. The use of two leading classes, gives the class more specificity than the default root menu class. This allows the custom class to take precedence.

Buildng the class selector name

To build the appropriate name, begin with the root class of the menu theme you are using. In the above scenario, we are using theme 12 (Boardroom), so our class name begins with:

.p7PM3-12

We then add a second class name, using the global class assigned to all PMM3 root menus, regardless of theme:

.p7PM3

The third and final class used to build the selector name is the special class assigned to menus when they are in fixed mode:

.p7pm3-fixed

Put them all together and you have:

.p7PM3-12.p7PM3.p7pm3-fixed

What else can I do with the p7pm3-fixed class?

There are all sorts of creative uses. For instance, there may be times when your default menu is left-aligned, but your fixed menu would look better if centered. If we use our example class from above, we would simply add a text-align property, set to center:

.p7PM3-12.p7PM3.p7pm3-fixed {
background-color: #FFFFFF;
text-align: center;
}

Other cases

There may also be cases where you would like the overall menu bar to be less than the full window width, and centered. Position fixed elements are not centered the way normal elements are. We need to assign a percentage width and a left and right margin. The width and the margins must total 100%. Let's try that with the Chili (02) theme.

.p7PM3-02.p7PM3.p7pm3-fixed {
width: 84%;
margin-left: 8%;
margin-right: 8%;
border-radius: 0px 0px 8px 6px;
box-shadow: 0px 0px 30px rgba(0,0,0,.5);
}

The width and margins add up to 100%, so we're cool. We also add rounded corners to the bottom... and a shadow. The result can be seen in this example:

TEST PAGE 3

The possibilities are endless!

What if your needs go beyond the scope of this tutorial?

Well, we can't cover all scenarios in a single tutorial—but if there is something special you need to do, please do not hesitate to contact us or post on our forum. Please see this page for links:

Support Options

What about phones and tablets?

The default media query used by PMM3 will turn off fixed positioning for phones. If we allowed the option to work on phones, users would not be able to see the content, as a typical menu, when converted to smartphone accordion mode, would likely take up all of the viewport... and very possibly more.

Tablets do support the technique.

Can a Vertical PMM3 menu be Fixed?

It can, but we do not recommend doing so unless your menu is limied to no more than 5 or 6 root links. If the root menu, including all flyout levels, ever winds up taller than your visitor's window, the menu items below the bottom of the window will be totally inaccessible. If there is a genuine need for you to fix a vertical menu, contact support and we will try to help you plan and implement it.