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.

MGM Home | MGM Tutorials Home

Mega Menu Magic: Wrap control Learn to fine-tune your MGM 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 MGM CSS file or in your page style sheet.

The media query

The media queries for various MGM style themes have common elements. Only the class name will be different. Let's examine a media query written for theme 01, in which all class names begin with p7MGM-01:

@media only screen and (min-width: 700px) and (max-width: 940px) {
.p7MGM-01 li.mgm-root-item {padding: 0px 0px 0px 0px; width: 31.25%; margin: 5px 1% !important;}
.p7MGM-01 a.mgm-root-item {border: 1px solid; border-bottom: 1px solid;}
.p7MGM-01.rounded a.mgm-root-item {border-radius: 5px;}
}

The above query works for all MGM themes. Simply change the "01" to reflect the theme number you are using.

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.

.p7MGM-01 li.mgm-root-item

The root level LI elements have padding set to zero and 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.

.p7MGM-01 a.mgm-root-item

The root level link elements are given a full border. The border-bottom is set separately to counteract theme 01, which does not have a bottom border.

.p7MGM-01.rounded a.mgm-root-item

We add a full radius for menus set with the rounded option.

See example

We've prepared an example page for you.

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.