diff --git a/js/tests/visual/megamenu.html b/js/tests/visual/megamenu.html
index 3eb2b046a9..81c6aef2cd 100644
--- a/js/tests/visual/megamenu.html
+++ b/js/tests/visual/megamenu.html
@@ -5,296 +5,166 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Megamenu</title>
-  <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="../../../dist/css/boosted.min.css">
 </head>
-<body> 
+<body>
 
-	<header role="banner">
-        <nav id="main_nav" class="navbar mega-menu" role="navigation">
-			
-			<div class="black border-bottom sticky topmenu" style="top: -5px;">
-			
-				<div class="black color-white weight_normal container topmenucontent" >
-					<div class="left color-white f15 ft13 navbar-brand-smallblock">
-						
-						<a class="navbar-brand-small" href="#"><img src="../../../docs-orange/examples/orange-news/images/logo-orange.png" alt="Link to the homepage"></a>
-					</div>
-					<div class="megamenu-top-main color-white f15 ft13">
-						<div onclick="openMenu()">
-						</div><!-- ‡	
-						 --><a href="Javascript:void(0)" class="color-orange" >Personal</a><!-- 
-						 --><a href="Javascript:void(0)">Business</a><!-- 
-						 --><a href="Javascript:void(0)">Follow us </a>
-					</div>
-					<div class="right color-white f15 ft13">
-						
-						<a href="Javascript:void(0)">
-							<span class="icon-buy" >
-							</span>
-						</a>
-						<a href="Javascript:void(0)"  class="megamenuaccounttop"  >
-							<span class="icon-my-account" style="color: #fff!important;"></span>
-						</a>
-						<a href="Javascript:void(0)" class="megamenusearchtop"  >
-							<span class="icon-search" >
-							</span>
-						</a>
-						<a class="megamenubacktop navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-							<span class="sr-only">Toggle navigation</span>
-							<span class="icon-bar"></span>
-							<span class="icon-bar"></span>
-							<span class="icon-bar"></span>
-						</a>
-					
-						<a href="Javascript:void(0)" class="megamenuclosetop" >x</a>
-				 
-						<a  href="Javascript:void(0)" class="color-orange f15 ft13 topmenulang ">EN</a>
-					</div>
-				</div>
-			
-			</div>
-			<div class="container">
-				<!-- Collect the nav links, forms, and other content for toggling -->
-				<div class="navbar-smallsearchbar" >
-					<div class=megamenusearchwraper>
-						<div class="megamenusearchinputwrapp" style="float : left;" >
-							<input class="megamenusearchinputtext" type="text" value="" /> 
-							<div class="megamenusearchinputclose" >X</div>
-						</div>
-						<button type="button" class="btn btn-primary">
-						<span class="icon-search" ></span>
-						</button>
-					</div>
-				</div>
-				<div class="navbar-langbar" >
-					<ul class="navbar " >
-						<li><a href="#">English</a></li>
-						<li><a href="#" class="color-orange" >Français</a></li>
-					</ul>
-				</div>
-				<div class="navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
-						<a class="navbar-brand" href="#"><img src="../../../docs-orange/examples/orange-news/images/logo-orange.png" alt="Link to the homepage"></a>
-                        <ul class="nav navbar-nav nav-menu">
-						  <li class="nav-item dropdown">
-                            <a href="#" title="open the news menu" class=" megamenu-dropdown-toggle " data-toggle="dropdown"><span class="sr-only">open the </span>Produits et service <b class="caret" aria-hidden="true"></b><span class="sr-only"> menu</span></a>
-                            <ul class="dropdown-megamenu" role="menu">
-                                <li class=container >
-									
-                                    <div class="row mega-menu-content">
-										<h2 class=mega-menu-content-title >
-										Accueil Produits et service  
-										</h2>
-                                        <div class="col-xs-12 col-sm-12 col-md-3">
-											<h3> Pour votre mobile </h3>
-                                            <ul>
-                                                <li><a href="#">Iphone 6</a></li>
-                                                <li><a href="#">Phones </a></li>
-                                                <li><a href="#">Tablets</a></li>
-                                                <li><a href="#">Acessories</a></li>
-                                                <li><a href="#">Comming soon</a></li>
-                                            </ul>
-                                        </div>
-                                        <div class="col-xs-12 col-sm-12 col-md-3">
-											<h3> Pour votre tablette </h3>
-                                            <ul>
-                                                <li><a href="#">Phones</a></li>
-                                                <li><a href="#">Plans</a></li>
-                                                <li><a href="#">Acessories</a></li>
-                                                <li><a href="#">Connected objects</a></li>
-                                                <li><a href="#">Options</a></li>
-                                            </ul>
-                                        </div>
-                                        <div class="col-xs-12 col-sm-12 col-md-3">
-											<h3> Pour la maison </h3>
-                                            <ul>
-                                                <li><a href="#">Pay monthly offers</a></li>
-                                                <li><a href="#">Shared Plans</a></li>
-                                                <li><a href="#">Orange TV</a></li>
-                                                <li><a href="#">>Broadband + mobile</a></li>
-                                                <li><a href="#">Customer Offers</a></li>
-                                            </ul>
-                                        </div>
-                                        <div class="col-xs-12 col-sm-12 col-md-3">
-											<div style="disply : inline-block; position: relative; width :200px; height : 200px;" >
-												<div class="icon-frame-tariff logo-menu-accueil" >
-												</div>
-												<div style="padding : 35px 35px 35px 45px; font-size : 18px; margin-bottom: 20px; " > Swimming <br> in minuites. Desparate <br> for data.
-												</div>
-											</div>
-											<p>
-												if your orange plan isn't working out, we 'll change it to fit around you.
-											</p>
-											<button type="button" class="btn btn-default">Find out more</button>
-                                        </div>
-										<div class=closing-bare >
-											<div class=closing-bare-button >
-												<a role="button" class="pull-right" href="#" title="close the menu">
-													<span class="sr-only">close the menu</span><span class="glyphicon glyphicon-remove">X</span>
-												</a>
-											</div>
-											<span class="icon-free-tag" >
-											</span>
-											promotions
-											<span class="icon-top-up-dollar" >
-											</span>
-											Top up
-											
-										</div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </li>
+    <header role="banner">
+        <nav class="navbar navbar-dark supra" role="navigation">
+            <div class="container">
+                <ul class="nav navbar-nav">
+                    <li class="nav-item"><a href="#" class="nav-link active">Personal</a></li>
+                    <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+                    <li class="nav-item"><a href="#" class="nav-link">Follow us</a></li>
+                </ul>
+                <ul class="nav navbar-nav pull-xs-right">
+                    <li class="nav-item">
+                            <a href="#" class="nav-link">
+                            <span class="sr-only">basket</span>
+                            <span class="icon-buy" aria-hidden="true"></span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">
+                            <span class="sr-only">my account</span>
+                            <span class="icon-avatar"></span>
+                        </a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="dropdown-toggle" href="#" data-toggle="dropdown">EN</a>
+                        <ul class="dropdown-menu" role="menu">
+                            <li><a class="dropdown-item" href="#">FR</a></li>
+                            <li><a class="dropdown-item" href="#">SP</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+        </nav>
 
-                        <li class="nav-item dropdown ">
-                            <a href="#" title="open the shop menu" class="megamenu-dropdown-toggle " data-toggle="dropdown"><span class="sr-only">open the </span>discover <b class="caret" aria-hidden="true"></b><span class="sr-only"> menu</span></a>
-                            <ul class="dropdown-megamenu" role="menu">
-                                <li class=container >
-									
-                                    <div class="row mega-menu-content">
-										<h2 class=mega-menu-content-title >
-										 Home discover
-										</h2>
-                                        <div class="col-xs-6 col-sm-6 col-md-3 logo-menu-discover-wrap"  >
-												<div class="icon-frame-fun logo-menu-discover logo-menu-discover" >
-												</div>
-												<div class="logo-menu-discover-caption" > fun </div>
-                                        </div>
-                                        <div class="col-xs-6 col-sm-6 col-md-3 logo-menu-discover-wrap">
-										    
-											<div class="icon-frame-tariff logo-menu-discover"  >
-											</div>
-											<div class="logo-menu-discover-caption" > tariff </div>
-                                        </div>
-                                        <div class="col-xs-6 col-sm-6 col-md-3 logo-menu-discover-wrap">
-											<div class="icon-frame-money logo-menu-discover" >
-											</div>
-											<div class="logo-menu-discover-caption" > money </div>
-                                        </div>
-                                        <div class="col-xs-6 col-sm-6 col-md-3 logo-menu-discover-wrap">
-											<div class="icon-frame-care logo-menu-discover" >
-											</div>
-											<div class="logo-menu-discover-caption" > care </div>
-                                        </div>
-										<div class=closing-bare >
-											<div class=closing-bare-button >
-												<a role="button" class="pull-right" href="#" title="close the menu">
-													<span class="sr-only">close the menu</span><span class="glyphicon glyphicon-remove">X</span>
-												</a>
-											</div>
-										</div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </li>
-                         <li class="nav-item dropdown">
-                            <a href="#" title="open the news menu" class=" megamenu-dropdown-toggle " data-toggle="dropdown"><span class="sr-only">open the </span>Produits et service <b class="caret" aria-hidden="true"></b><span class="sr-only"> menu</span></a>
-                            <ul class="dropdown-megamenu" role="menu">
-                                <li class=container >
-									
-                                    <div class="row mega-menu-content">
-										<h2 class=mega-menu-content-title >
-										Accueil Produits et service  
-										</h2>
-                                        <div class="col-xs-12 col-sm-12 col-md-3">
-											<h3> Pour votre mobile </h3>
-                                            <ul>
-                                                <li><a href="#">Iphone 6</a></li>
-                                                <li><a href="#">Phones </a></li>
-                                                <li><a href="#">Tablets</a></li>
-                                                <li><a href="#">Acessories</a></li>
-                                                <li><a href="#">Comming soon</a></li>
-                                            </ul>
-                                        </div>
-                                        <div class="col-xs-12 col-sm-12 col-md-3">
-											<h3> Pour votre tablette </h3>
-                                            <ul>
-                                                <li><a href="#">Phones</a></li>
-                                                <li><a href="#">Plans</a></li>
-                                                <li><a href="#">Acessories</a></li>
-                                                <li><a href="#">Connected objects</a></li>
-                                                <li><a href="#">Options</a></li>
-                                            </ul>
-                                        </div>
-                                        <div class="col-xs-12 col-sm-12 col-md-3">
-											<h3> Pour la maison </h3>
-                                            <ul>
-                                                <li><a href="#">Pay monthly offers</a></li>
-                                                <li><a href="#">Shared Plans</a></li>
-                                                <li><a href="#">Orange TV</a></li>
-                                                <li><a href="#">>Broadband + mobile</a></li>
-                                                <li><a href="#">Customer Offers</a></li>
-                                            </ul>
-                                        </div>
-                                        <div class="col-xs-12 col-sm-12 col-md-3">
-											<div style="disply : inline-block; position: relative; width :200px; height : 200px;" >
-												<div class="icon-frame-tariff logo-menu-accueil" >
-												</div>
-												<div style="padding : 35px; font-size : 20px; margin-bottom: 20px; " > Swimming <br> in minuites. Desparate <br> for data.
-												</div>
-											</div>
-											<p>
-												if your orange plan isn't working out, we 'll change it to fit around you.
-											</p>
-											<button type="button" class="btn btn-default">Find out more</button>
-                                        </div>
-										<div class=closing-bare >
-											<div class=closing-bare-button >
-												<a role="button" class="pull-right" href="#" title="close the menu">
-													<span class="sr-only">close the menu</span><span class="glyphicon glyphicon-remove">X</span>
-												</a>
-											</div>
-											<img src="../../../docs-orange/examples/orange-news/images/promotion.png" alt="promote"/>
-										</div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </li>
-                        <li class="nav-item dropdown searchpanel" style=" float :right" >
-                            <a href="#" title="open the shop menu" class="megamenu-dropdown-toggle active" data-toggle="dropdown">
-								<span class="sr-only">open the search </span>
-									<span class="icon-search"></span>
-									<b class="caret" aria-hidden="true"></b><span class="sr-only"> menu
-								</span>
-							</a>
-                            <ul class="dropdown-megamenu" role="menu">
-                                <li class="container">
-									<div class="megamenusearchwraper">
-										<div style="display:inline-block; " class="megamenusearchinputwrapp" >
-											<input class="megamenusearchinputtext" type="text" value="" style="" /> 
-											<div class="megamenusearchinputclose" >X</div>
-										</div>
-										<button type="button" class="btn btn-primary">Search</button>
-									</div>
-                                </li>
-                            </ul>
-                        </li>
-					</ul>
-				</div><!-- /.navbar-collapse -->
-				<div class="menu-footer-320 left  f15 ft13">
-					<ul>
-						<li><a href="Javascript:void(0)" class="color-orange" >Personal</a></li>
-						<li><a href="Javascript:void(0)">Business</a></li>
-						<li><a href="Javascript:void(0)">Follow us </a></li>
-					</ul>
-				</div>
-			</div>
-			<!-- /.container-fluid -->
-			
-		</nav>
-        </header>
-<div class="container">
-  <div class="page-header" style="margin-top :140px " >
-    <h1>Alert <small>Bootstrap Visual Test</small></h1>
-  </div>
+        <nav class="navbar navbar-dark" role="navigation">
+            <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
+                <span class="sr-only">toggle navigation</span>
+                <span class="icon-menu"></span>
+            </button>
+            <div class="container" >
+                <a class="navbar-brand"><img src="images/logo-orange.jpg" alt='Back to homepage' title='Back to homepage'/></a>
+                <ul class="nav navbar-nav collapse navbar-toggleable-xs" id="collapsingNavbar">
+                    <li class="nav-item"><a class="nav-link" href="#collapseDiscover" data-parent="#collapsingNavbar" data-toggle="collapse" aria-expanded="false" aria-controls="collapseDiscover" title="open discover menu">Discover</a></li>
+                    <li class="nav-item"><a class="nav-link" data-parent="#collapsingNavbar" data-toggle="collapse" href="#collapseShop" aria-expanded="false" aria-controls="collapseShop" title="open shop menu">Shop</a></li>
+                    <li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
+                    <li class="nav-item"><a href="#" class="nav-link">Help</a></li>
+                    <li class="nav-item" id="id_li_for_cdu"></li>
+                </ul>
+                <ul class="nav navbar-nav pull-xs-right">
+                    <li class="nav-item">
+                        <a href="#" class="nav-link icon">
+                            <span class="sr-only">open basket</span>
+                            <span class="icon-buy" aria-hidden="true"></span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#collapseSearchBar" data-toggle="collapse" class="nav-link icon" aria-expanded="false" aria-controls="collapseSearchBar">
+                            <span class="sr-only">open search bar</span>
+                            <span class="icon-search" aria-hidden="true"></span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+    </header>
 
-</div>
+    <div class="collapse search-bar" id="collapseSearchBar">
+        <div class="container">
+            <form class="form-inline" role="search">
+                <div class="form-group">
+                    <label class="sr-only" for="search_btn">search bar</label>
+                    <input id="search_btn" type="text" class="form-control">
+                </div>
+                <button type="submit" class="btn btn-inverse btn-primary pull-md-right">Search</button>
+            </form>
+        </div>
+    </div>
 
+    <div class="mega-menu panel">
+        <div class="collapse panel-collapse " id="collapseDiscover" aria-labelledby="menu_title_discover">
+            <div class="container">
+                <h2 aria-hidden="true" id="menu_title_discover"><a href="#">Home Discover</a></h2>
+                <div class="row">
+                    <div class="o-frame-wrapper col-xs-6 col-sm-6 col-md-3">
+                        <a href="#" class="o-frame o-frame-fun">
+                            <p class="o-frame-text">Fun</p>
+                        </a>
+                    </div>
+                    <div class="o-frame-wrapper col-xs-6 col-sm-6 col-md-3">
+                        <a href="#" class="o-frame o-frame-money">
+                            <p class="o-frame-text">Money</p>
+                        </a>
+                    </div>
+                    <div class="o-frame-wrapper col-xs-6 col-sm-6 col-md-3">
+                        <a href="#" class="o-frame o-frame-care">
+                            <p class="o-frame-text">Care</p>
+                        </a>
+                    </div>
+                    <div class="o-frame-wrapper col-xs-6 col-sm-6 col-md-3">
+                        <a href="#" class="o-frame o-frame-tariff">
+                            <p class="o-frame-text">Tariff</p>
+                        </a>
+                    </div>
+                </div>
+                <div class="row footer">
+                    <div class="pull-md-right hidden-xs-down">
+                        <a data-toggle="collapse" href="#collapseDiscover" aria-expanded="false" aria-controls="collapseDiscover" title="close discover menu"><span class="icon-delete"></span></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<!-- JavaScript Includes -->
-<script src="../vendor/jquery.min.js"></script>
-<script src="../../dist/util.js"></script>
+    <div class="mega-menu panel">
+        <div class="collapse panel-collapse" id="collapseShop" aria-labelledby="menu_title2">
+            <div class="container">
+                <h2 aria-hidden="true" id="menu_title2"><a href="#">Home Shop</a></h2>
+                <div class="row">
+                    <div class="col-xs-12 col-sm-12 col-md-3">
+                        <h3 id="list_title_1"><a href="#">Internet</a></h3>
+                        <ul aria-labelledby="list_title_1" role="menu">
+                            <li role="menuitem"><a href="#">iPhone 6</a></li>
+                            <li role="menuitem"><a href="#">Phones </a></li>
+                            <li role="menuitem"><a href="#">Tablets</a></li>
+                            <li role="menuitem"><a href="#">Accessories</a></li>
+                            <li role="menuitem"><a href="#">Coming soon</a></li>
+                        </ul>
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-3">
+                        <h3 id="list_title_2"><a href="#">Mobile</a></h3>
+                        <ul aria-labelledby="list_title_2" role="menu">
+                            <li role="menuitem"><a href="#">Phones </a></li>
+                            <li role="menuitem"><a href="#">Plans</a></li>
+                            <li role="menuitem"><a href="#">Accessories</a></li>
+                            <li role="menuitem"><a href="#">Connected objects</a></li>
+                            <li role="menuitem"><a href="#">Options</a></li>
+                            <li role="menuitem"><a href="#">Bundles</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="row footer">
+                    <div class="pull-md-left">
+                        <a href="#">Promotions</a>
+                        <a href="#">Top up</a>
+                    </div>
+                    <div class="pull-md-right hidden-xs-down">
+                        <a data-toggle="collapse" href="#collapseShop" aria-expanded="false" aria-controls="collapseShop" title="close shop menu"><span class="icon-delete"></span></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<script src="../../dist/megamenu.js"></script>
+    <!-- JavaScript Includes -->
+    <script src="../vendor/jquery.min.js"></script>
+    <script src="../../dist/util.js"></script>
+    <script src="../../dist/collapse.js"></script>
+    <script src="../../dist/megamenu.js"></script>
 	<script type="text/javascript" src="http://comfort.orange.com/serveur/crossdom/js/toolbar-min.js"></script>
 </body>
 </html>
\ No newline at end of file
