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.
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.
The media query can be placed at the bottom of your MGM CSS file or in your page style sheet.
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...
The min-width in the query is always 700px. The max-width is the width at which the menu begins to wrap.
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.
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.
We add a full radius for menus set with the rounded option.
We've prepared an example page for you.
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.
Using this approach you can fine-tune how your menu wraps to perfectly fit your design.