Contact me

How To Build Mega Menus With Flatsome UX Builder

This is the second part of the IKEA homepage redesign focussing on how to construct Mega Menus. The beauty of this method is that you can create anything you want with the UX Builder so you aren’t resigned to really boring lists for menus. You can add in blog posts, banners and more to create navigation that not only looks incredible but works much better than the standard menu too.

UX Shortcode for the block

				
					[row v_align="middle" h_align="center" padding="0px 0px 48px 0px"][col span="2" span__sm="12" margin="20px 0px 0px 0px"]
<h2><span data-text-color="primary">Kitchen</span></h2>
<h3><a class="menu-mega-item" href="http://ikea-v2.local" target="_blank" rel="noopener">Rugs</a></h3>
<h3><a class="menu-mega-item" href="http://ikea-v2.local" target="_blank" rel="noopener">Tables</a></h3>
<h3><a class="menu-mega-item" href="http://ikea-v2.local" target="_blank" rel="noopener">Chairs</a></h3>
<h3><a class="menu-mega-item" href="http://ikea-v2.local" target="_blank" rel="noopener">Cabinets</a></h3>
[/col] [col span="5" span__sm="12" margin="20px 0px 0px 0px"]
<h3></h3>
<h3><a class="menu-mega-item" href="http://ikea-v2.local" target="_blank" rel="noopener">Not Rugs</a></h3>
<h3><a class="menu-mega-item" href="http://ikea-v2.local" target="_blank" rel="noopener">Desks</a></h3>
<h3><a class="menu-mega-item" href="http://ikea-v2.local" target="_blank" rel="noopener">Things</a></h3>
<h3><a class="menu-mega-item" href="http://ikea-v2.local" target="_blank" rel="noopener">More Things</a></h3>
[/col] [col span="4" span__sm="12"][gap height="50px"][ux_banner height="311px" bg_color="rgba(135, 178, 187, 0.62)"][text_box text_color="dark" scale="146" margin="5px 0px 0px -65px" position_x="0" position_y="0" text_align="left"]
<h3><strong>Shop Kitchen</strong></h3>
[/text_box] [ux_image id="40" height="308px" margin="0px 80px -53px -100px" position_x="0" position_y="100"][/ux_banner][/col][/row]

2 Responses

Leave a Reply