NAVX

Tutorial and guides

Megamenu grid

Organize the megamenu content easily

When it is necessary to organize a lot of content within a megamenu panel, a CSS grid system becomes necessary. Here are some ways to use the CSS grid system. Click here to see how to implement a megamenu and here to see how to use the grid system. Now we will detail the CSS grid.

Auto-layout columns

Use the "navigation-col" class to divide the megamenu in various parts:

3 columns:

Copy 
<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
    </div>
</div>

9 columns:

Copy 
<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
    </div>
</div>

Various rows:

Copy 
<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
        <div class="navigation-row">
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
        <div class="navigation-row">
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
    </div>
</div>
Columns with a fixed width

Use the "navigation-col-*" classes to divide the megamenu in up to 12 columns.

3 columns:

Copy 
<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col-4">...</div>
            <div class="navigation-col-4">...</div>
            <div class="navigation-col-4">...</div>
        </div>
    </div>
</div>

3 columns with different widths:

Copy 
<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col-2">...</div>
            <div class="navigation-col-6">...</div>
            <div class="navigation-col-4">...</div>
        </div>
    </div>
</div>
Auto-layout columns and fixed columns together

Fixed columns will occupy the given width, and auto-layout columns will occupy the rest of the space. In the example below we put two fixed columns occupying half the space and 5 auto-layout columns occupying the other 50%:

Copy 
<div class="navigation-megamenu">
    <div class="navigation-megamenu-container">
        <div class="navigation-row">
            <div class="navigation-col-3">...</div>
            <div class="navigation-col-3">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
            <div class="navigation-col">...</div>
        </div>
    </div>
</div>

You can use the grid system you want, such as the Bootstrap Grid System, for example.

See the list of tutorials for other ways to modify the navigation bar and add features.