PMM3 Home | PMM3 Tutorials Home
Pop Menu Magic 3: Wrap control Learn to fine-tune your PMM3 menu using media queries
This tutorial is intended for responsive layouts only. If your page design is not responsive, then you should not use the methods described below.
With horizontal navigation bars there comes a time when the number of links, or the length of links, causes the root menu to wrap to a second line. While this is normal and expected behavior, there may be times when you want to control how the menu wraps to make things look prettier. This tutorial will show you how—using a CSS media query.
The media query
Customizing how your menu wraps is accomplished using a CSS media query. To determine the query parameters, you need to determine the window width at which your menu wraps. To determine the point at which your menu wraps, preview your page in a browser. Then adjust the window width until the menu begins to wrap. If you do not have a screen ruler available, simply make a best guess. The width can be easily adjusted later. We created an example menu that starts to wrap at about 940 pixels. The media query we use, then, is this:
@media only screen and (min-width: 700px) and (max-width: 940px) {
/*Rules go in here*/
}
The min-width is always 700px, which is the point at which the menu does its smartphone conversion. The max-width is the width at which your menu begins to wrap. The CSS rules for the query go inside the opening and closing curly braces.
Note: If your max-width is 1024px or less it will also be acted upon by tablet devices, such as iPads.
Where does the media query go?
The media query can be placed at the bottom of your PMM3 CSS file or in your page style sheet.
The media query
The media queries for various PMM3 style themes have certain common elements. Let's examine a media query written for theme 01, so all class names begin with p7PM3-01:
@media only screen and (min-width: 700px) and (max-width: 940px) {
.p7PM3-01 ul li {width: 23%; margin: 5px 1%;}
.p7PM3-01 ul ul li {width: auto;}
.p7PM3-01 ul li a {border: 1px solid #000;}
}
Let's break down the media query line by line...
@media only screen and (min-width: 700px) and (max-width: 940px)
The min-width in the query is always 700px. The max-width is the width at which the menu begins to wrap.
.p7PM3-01 ul li
The root level LI elements are assigned a percentage width. Adjust the width percentage as needed for your particular situation.
We also set margins to provide a visually pleasing vertical and horizontal separation to the wrapped links.
.p7PM3-01 ul ul li
The LI elements in the sub-menus. Here we reset the width back to auto.
.p7PM3-01 ul li a
The root a elements. Since theme 01 does not have borders around the root links by default, we add them here for visual symmetry.
See examples
We've prepared 4 example pages. Each example page lists the media query it uses.
The first example works for themes 01, 05, 12 and 13:
The second example works for themes 02, 03, 04, 06, and 09:
The third example works for themes 08, 10, and 11:
The fourth example works for theme 14:
For fixed-width non-responsive layouts
For fixed width non-responsive layouts, do not use a media query. Inststead, determine a percentage width for your root LI elements that works for your wrap and add the rules in the above media queries to the default sections of your menu style sheet.
In closing...
Using this approach you can fine-tune how your menu wraps to perfectly fit your design.