The navigation bar on this page demonstrates a menu that has full width drop down mega menus.

To avoid accidental opening, clicking is necessary to activate the menu.

Similar to non-full width mega menus, responsive full width mega menus require some custom coding. 

1.
2.
3.
4.
5.
6.
7.
8.
9.
 
    /* full width submenus */
.full_width_mega_page #nav .menu_normal li {
    position: static !Important;
}

.full_width_mega_page #nav .menu_normal .sub-menu  {
    left: 0 !Important;
    right: 0 !Important;
}
Menu 1 Mega Menu
Content: 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
 
[row class="fashion_mega_menu_holder"]
    [col4]
        <b>Women's Footwear</b>

        [divider /]

        [list icon="arrow-right-2" icon_size="12px"]
        <ul>
            <li><a href="#">Trainers</a></li>
            <li><a href="#">Boots & Shoes</a></li>
            <li><a href="#">Fitness Footwear</a></li>
            <li><a href="#">Running Shoes</a></li>
            <li><a href="#">Canvas & Plimsolls</a></li>
            <li><a href="#">Flip-Flops & Sandals</a></li>
            <li><a href="#">Hi-Tops</a></li>
        </ul>
        [/list]
    [/col4]
    [col4]
        <b>Women's Clothing</b>

        [divider /]

        [list icon="arrow-right-2" icon_size="12px"]
        <ul>
            <li><a href="#">Hoodies</a></li>
            <li><a href="#">T-Shirts & Polo Shirts</a></li>
            <li><a href="#">Sweatshirts & Knits</a></li>
            <li><a href="#">Track Pants</a></li>
            <li><a href="#">Track Tops</a></li>
            <li><a href="#">Jeans & Trousers</a></li>
            <li><a href="#">Leggings</a></li>
            <li><a href="#">Jackets</a></li>
            <li><a href="#">Gilets</a></li>
            <li><a href="#">Swimwear</a></li>
            <li><a href="#">Shorts</a></li>
            <li><a href="#">Vests</a></li>
            <li><a href="#">Socks & Underwear</a></li>
        </ul>
        [/list]
    [/col4]
    [col4]
        <b>Men's Footwear</b>

        [divider /]

        [list icon="arrow-right-2" icon_size="12px"]
        <ul>
            <li><a href="#">Trainers</a></li>
            <li><a href="#">Classic Trainers</a></li>
            <li><a href="#">Skate Shoes</a></li>
            <li><a href="#">Hi-Tops</a></li>
            <li><a href="#">Boots & Shoes</a></li>
            <li><a href="#">Fitness Footwear</a></li>
            <li><a href="#">Football Boots</a></li>
            <li><a href="#">Running Shoes</a></li>
            <li><a href="#">Canvas & Plimsolls</a></li>
            <li><a href="#">Flip-Flops & Sandals</a></li>
        </ul>
        [/list]
    [/col4]
    [col4]
        <b>Men's Clothing</b>

        [divider /]

        [list icon="arrow-right-2" icon_size="12px"]
        <ul>
            <li><a href="#">Hoodies</a></li>
            <li><a href="#">Track Pants</a></li>
            <li><a href="#">Jackets</a></li>
            <li><a href="#">T-Shirts & Vests</a></li>
            <li><a href="#">Polo Shirts</a></li>
            <li><a href="#">Shirts</a></li>
            <li><a href="#">Shorts</a></li>
            <li><a href="#">Swimwear</a></li>
            <li><a href="#">Track Tops</a></li>
            <li><a href="#">Sweatshirts</a></li>
            <li><a href="#">Gilets</a></li>
            <li><a href="#">Jumpers & Cardigans</a></li>
            <li><a href="#">Jeans</a></li>
            <li><a href="#">Chinos</a></li>
            <li><a href="#">Tracksuits</a></li>
            <li><a href="#">Baselayers</a></li>
        </ul>
        [/list]
    [/col4]
[/row]

Custom CSS: 

1.
2.
3.
4.
5.
6.
7.
8.
9.
 
    /* change 4-column layouts to 2-column layouts */
@media only screen and (max-width: 767px) {
    .fashion_mega_menu_holder .col4 {
        width: 50%;
    }
    .fashion_mega_menu_holder {
        font-size: 13px;
    }
}

Menu 2 Mega Menu
Content: 
1.
2.
3.
 
<div class="slider_mega_menu_holder">
    [widget_area name="Mega Slider" /]
</div>

Custom CSS: 

1.
2.
3.
4.
5.
6.
7.
8.
 
.slider_mega_menu_holder .slideshow {
    margin-top: 10px;
}
@media only screen and (max-width: 600px) {
    .slider_mega_menu_holder .col {
        width: 100%;
    }
}

Menu 3 Mega Menu
Content: 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
 
<div class="tab_mega_menu_holder">
    [tabset type="vertical" autoplay="true"]
        [tab_labels]
            [tab_label]Recent posts[/tab_label]
            [tab_label]Popular posts[/tab_label]
        [/tab_labels]
        [tab_contents]
            [tab_content][post_list posts_per_page="3" columns_num="3" thumbnail_width="180" /][/tab_content]
            [tab_content][post_list posts_per_page="3" columns_num="3" thumbnail_width="180" order_by="comment_count" /][/tab_content]
        [/tab_contents]
    [/tabset]
</div>

Custom CSS: 

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
 
.tab_mega_menu_holder {
    padding: 8px; 
    font-size: 13px;
}

@media only screen and (max-width: 520px) {
    .tab_mega_menu_holder .col {
        width: 100%;
    }
}

Menu 4 Mega Menu
Content: 
1.
2.
3.
 
<div class="contact_mega_menu_holder">
    [widget_area name="Contact" /]
</div>