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 Home | PMM3 Tutorials Home

PMM 3: Scale to Prevent Wrap 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 prevent the menu from wrapping. This tutorial will show you how—using CSS media queries.

The goal is to use media queries to progressively reduce font-size and padding as the screen gets narrower.

Instead of this:

You'll get this:

See Example Page

The first media query

To determine the query parameters, you need to determine the approximate window width at which your menu first 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 1080 pixels. The media query we use, then, is this:

@media only screen and (min-width: 700px) and (max-width: 1080px) {
/*Rules go in here*/
}

What we will do is simple. We will turn off padding for the root menu. Then we will adjust padding on the root links. These changes are sufficient to allow our example menu to fit in the window without wrapping. Remember, if your particular menu still wraps at our setting, you should increase the max-width value in your media query. Ours is 1080px. You might need to make it 1300px.

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. Here are the rules for this media query:

.p7PM3 {
padding: 0px !important;
}
.p7PM3-02 ul li a {
font-size: 100%;
padding: 8px 5px;
}
.p7PM3-02 ul ul li a {
padding: 8px 16px;
}
.p7PM3-02 a.trig_closed, .p7PM3-02 a.trig_open {
padding-left: 1.2em;
}

Note: Our example uses PMM3 style theme 02 (Chili), so most of our class names begin with .p7PM3-02. If you are using theme 05, then your class names need to begin with .p7PM3-05.

Let's keep adjusting

Once we set the first media query, and test it, we find that the menu stays on one line until we reduce our window width to approximately 1000px. So we use a second media query to respond to that width and reduce font-size.

@media only screen and (min-width: 700px) and (max-width: 1000px) {
.p7PM3-02 ul li a {
font-size: 92%;
}
}

Things are looking good. But between 840px and 700px (when the menu converts to an accordion) we experience a wrap. So we add a third media query, to reduce the font-size...and to increase padding left on the triggers so that the trigger arrows display nicely.

@media only screen and (min-width: 700px) and (max-width: 840px) {
.p7PM3-02 ul li a {
font-size: 74%;
}
.p7PM3-02 a.trig_closed, .p7PM3-02 a.trig_open {
padding-left: 1.5em;
}
}

One last query: Tablet Time

Tablets, especially Apple tablets, not only need a specific max-width, they also need a smaller font-size because of the way they render fonts. The following media query targets tablets. It is ignored by conventional desktop or laptop machines.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.p7PM3-02 ul li a {
font-size: 68%;
}
}

The key to your success with this technique is to test. It couldn't be easier. Your desktop brower will tell you exactly how to set up your media queries. You should also have access to a tablet device.

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 queries: All Together

Here is the entire block of 4 media queries used for our example:

@media only screen and (min-width: 700px) and (max-width: 1080px) {
.p7PM3 {
padding: 0px !important;
}
.p7PM3-02 ul li a {
font-size: 100%;
padding: 8px 5px;
}
.p7PM3-02 ul ul li a {
padding: 8px 16px;
}
.p7PM3-02 a.trig_closed, .p7PM3-02 a.trig_open {
padding-left: 1.2em;
}
}
@media only screen and (min-width: 700px) and (max-width: 1000px) {
.p7PM3-02 ul li a {
font-size: 92%;
}
}
@media only screen and (min-width: 700px) and (max-width: 840px) {
.p7PM3-02 ul li a {
font-size: 74%;
}
.p7PM3-02 a.trig_closed, .p7PM3-02 a.trig_open {
padding-left: 1.5em;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.p7PM3-02 ul li a {
font-size: 68%;
}
}

In closing...

Using this approach you can fine-tune how your menu wraps to perfectly fit your design.