Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
<header class="rbt-header">
<div class="container">
<nav class="rbt-mainmenu-nav">
<ul class="mainmenu">
<li class="with-rbt-megamenu has-menu-child-item position-static">
<a href="#">Shop <i class="fa-regular fa-chevron-down"></i></a>
<!-- Start Mega Menu -->
<div class="rbt-megamenu rbt-megamenu-4">
<div class="rbt-megamenu-wrapper p--0">
<div class="row row--0">
<div class="col-3 ">
<div class="rbt-menu-tab-wrapper">
<nav id="rbt-megamenuTab"
class="nav nav-pills flex-column rbt-megamenu-tab rbt-megamenu-tab-cs-activation">
<a href="#rbt-megamenu_tab1" data-bs-toggle="pill" class="active nav-link">
<span><i class="fa-regular fa-house-chimney"></i></span>
Shop Pages
<span class="rbt-chevron-right"><i class="fa-regular fa-chevron-right"></i></span>
</a>
<a href="#rbt-megamenu_tab2" data-bs-toggle="pill" class="nav-link">
<span><i class="fa-regular fa-mobile"></i></span>
Products Variation
<span class="rbt-chevron-right"><i class="fa-regular fa-chevron-right"></i></span>
</a>
...
</nav>
<div class="rbt-tab-banner-img">
<img src="..." alt="...">
</div>
</div>
</div>
<div class="col-9">
<div class="rbt-menu-tab-content-wrapper">
<div class="tab-content rbt-megamenu-tab-content" id="megamenu-tab-content">
<!-- single tab content -->
<div class="tab-pane show active" id="rbt-megamenu_tab1">
<div class="row row--24">
<div class="col-xl-8">
<div class="row row--8">
<div class="col-xl-4 single-mega-item">
<h6 class="rbt-short-title">Shop Pages</h6>
<ul class="mega-menu-item">
items...
</ul>
</div>
<div class="col-xl-4 single-mega-item">
<h6 class="rbt-short-title">Custom Pages</h6>
<ul class="mega-menu-item">
items...
</ul>
</div>
<div class="col-xl-4 single-mega-item">
<h6 class="rbt-short-title">Custom Pages</h6>
<ul class="mega-menu-item">
items...
</ul>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="rbt-menu-offer-card rbt-bg-style-box rbt-bg-three h-100 min-h-500">
<div class="mega-top-banner h-100 align-items-start justify-content-center">
<div class="rbt-banner-inner rbt-banner-inner-black flex-column rbt-gap--16 align-items-center text-center">
<div class="rbt-banner-content">
<p class="b4 subtitle mb--0">Embrace comfy wear</p>
<h5 class="h5 mb--4">Ready to fall in love with Autumn collection!</h5>
</div>
<a class="rbt-btn rbt-bg-color-secondary rbt-btn-sm" href="#">Shop Collection</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- single tab content -->
<div class="tab-pane fade" id="rbt-megamenu_tab2">
<div class="row row--24">
<div class="col-xl-8">
<div class="row row--8">
<div class="col-xl-4 single-mega-item">
items
</div>
<div class="col-xl-4 single-mega-item">
items
</div>
<div class="col-xl-4 single-mega-item">
items
</div>
<hr class="rbt-separator rbt-separator-gray200 mb--16 mt--16 mt_sm--12 mb_sm--12 rbt-bg-color-gray-100">
<div class="col-lg-12">
<ul class="rbt-nav-brand-list liststyle d-flex justify-content-between">
<li><a href="#!"><img src="..." alt="..."></a></li>
<li><a href="#!"><img src="..." alt="."></a></li>
...
</ul>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="rbt-menu-offer-card rbt-bg-style-box rbt-bg-four h-100">
<div class="mega-top-banner h-100 align-items-end justify-content-start">
<div class="rbt-banner-inner rbt-banner-inner-black flex-column rbt-gap--16 align-items-start text-left">
<div class="rbt-banner-content">
<p class="b4 subtitle rbt-text-color-white mb--0">Embrace comfy wear</p>
<h5 class="h5 mt--4 mb--0 rbt-text-color-white">Ready to fall in love with Autumn collection!</h5>
</div>
<a class="rbt-btn rbt-bg-color-secondary rbt-btn-sm" href="#">Shop Collection</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Mega Menu -->
</li>
</ul>
</nav>
</div>
</header>
<header class="rbt-header">
<div class="container">
<nav class="rbt-mainmenu-nav">
<ul class="mainmenu">
<li class="with-rbt-megamenu has-menu-child-item position-static">
<a href="#">Shop <i class="fa-regular fa-chevron-down"></i></a>
<!-- Start Mega Menu -->
<div class="rbt-megamenu rbt-width-fullscreen mega-has-bg-img mega-bg-one p-0 ">
<div class="rbt-megamenu-wrapper bg-transparent">
<div class="wrapper">
<div class="row row--12 mt_dec--12">
<div class="col-xl-9">
<div class="row">
<div class="col-12 col-lg-1-5 single-mega-item rbt-scroll-trigger fade_in animation-order-1 mt--16">
<h6 class="rbt-short-title">Inner Pages</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<div class="col-12 col-lg-1-5 single-mega-item rbt-scroll-trigger fade_in animation-order-1 mt--16">
<h6 class="rbt-short-title">Inner Pages</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<div class="col-12 col-lg-1-5 single-mega-item rbt-scroll-trigger fade_in animation-order-1 mt--16">
<h6 class="rbt-short-title">Portfolio Pages</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<div class="col-12 col-lg-1-5 single-mega-item rbt-scroll-trigger fade_in animation-order-1 mt--16">
<h6 class="rbt-short-title">Blog Pages</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<div class="col-12 col-lg-1-5 single-mega-item rbt-scroll-trigger fade_in animation-order-1 mt--16">
<h6 class="rbt-short-title">E-commerce</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<hr class="rbt-separator rbt-separator-gray200 mb--16 mt--16 mt_sm--12 mb_sm--12 rbt-bg-color-gray-100">
<div class="col-lg-12">
<ul class="rbt-nav-brand-list liststyle d-flex justify-content-between">
<li><a href="#!"><img src="..." alt="..."></a></li>
...
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Mega Menu -->
</div>
<!-- End Mega Menu -->
</li>
</ul>
</nav>
</div>
</header>
<header class="rbt-header">
<div class="container">
<nav class="rbt-mainmenu-nav">
<ul class="mainmenu">
<li class="with-rbt-megamenu has-menu-child-item position-static">
<a href="#">Shop <i class="fa-regular fa-chevron-down"></i></a>
<!-- Start Mega Menu -->
<div class="rbt-megamenu container">
<div class="rbt-megamenu-wrapper">
<div class="row row--12 d-flex justify-content-between">
<div class="col-xl-9">
<div class="row row--12">
<div class="col-xl-3 single-mega-item rbt-scroll-trigger fade_in animation-order-1">
<h6 class="rbt-short-title">Title</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<div class="col-xl-3 single-mega-item rbt-scroll-trigger fade_in animation-order-1">
<h6 class="rbt-short-title">Title</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<div class="col-xl-3 single-mega-item rbt-scroll-trigger fade_in animation-order-1">
<h6 class="rbt-short-title">Title</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<div class="col-xl-3 single-mega-item rbt-scroll-trigger fade_in animation-order-1">
<h6 class="rbt-short-title">Title</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<hr class="rbt-separator rbt-separator-gray200 mb--16 mt--16 mt_sm--12 mb_sm--12 rbt-bg-color-gray-100">
<div class="col-lg-12">
<ul class="rbt-nav-brand-list liststyle d-flex justify-content-between">
<li><a href="#!"><img src="..." alt="..."></a></li>
...
</ul>
</div>
</div>
</div>
<div class="col-xl-3 single-mega-item rbt-scroll-trigger fade_in animation-order-1">
<div class="rbt-menu-offer-card rbt-bg-style-box rbt-bg-two">
<div class="mega-top-banner">
<div class="rbt-banner-inner flex-column justify-content-center rbt-gap--8 align-items-center text-center">
<div class="rbt-banner-content">
<h5 class="title rbt-text-color-white">New Aurora Watch</h5>
<p class="b3 desc rbt-text-color-gray-200">Send your idea, appear Unimart.</p>
</div>
<a class="rbt-btn rbt-btn-sm" href="#">View Details</a>
<a href="#" class="product-img position-bottom mt--24"><img src="..." alt="..."></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Mega Menu -->
</li>
</ul>
</nav>
</div>
</header>
<header class="rbt-header">
<div class="container">
<nav class="rbt-mainmenu-nav">
<ul class="mainmenu">
<li class="with-rbt-megamenu has-menu-child-item position-static">
<a href="#">Shop <i class="fa-regular fa-chevron-down"></i></a>
<!-- Start Mega Menu -->
<div class="rbt-megamenu p-0 container">
<div class="rbt-megamenu-wrapper p--0">
<div class="wrapper">
<div class="row row--0">
<div class="col-8">
<div class="rbt-inner-menu-wrapper p--24">
<div class="row row-12 mt_dec--16">
<div class="col-12 col-lg-4 single-mega-item rbt-scroll-trigger fade_in animation-order-1 mt--16">
<h6 class="rbt-short-title">Ultimate User Experience</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<div
class="col-12 col-lg-4 single-mega-item rbt-scroll-trigger fade_in animation-order-1 mt--16">
<h6 class="rbt-short-title">Flexible Shopping</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
<div
class="col-12 col-lg-4 single-mega-item rbt-scroll-trigger fade_in animation-order-1 mt--16">
<h6 class="rbt-short-title">Boost Sales</h6>
<ul class="mega-menu-item">
list items...
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 single-mega-item rbt-scroll-trigger zoom_in animation-order-1">
<img class="h-100" src="..." alt="...">
</div>
</div>
</div>
</div>
<!-- End Mega Menu -->
</div>
<!-- End Mega Menu -->
</li>
</ul>
</nav>
</div>
</header>
<header class="rbt-header">
<div class="container">
<nav class="rbt-mainmenu-nav">
<ul class="mainmenu">
<li><a href="#">Nav Item <i class="fa-regular fa-chevron-down"></i></a></li>
<li class="has-dropdown position-relative">
<a href="#">Shop <i class="fa-regular fa-chevron-down"></i></a>
<!-- Start Dropdown Menu -->
<ul class="submenu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
<!-- End Dropdown Menu -->
</li>
</ul>
</nav>
</div>
</header>