Back to marketing experiences
Megamenu
Loading...
<header role="banner" id="header" class="bg-white shadow-sm position-sticky top-0 z-3">
<div class="container">
<div class="navbar navbar-expand-lg row navbar-light py-4" role="navigation" aria-label="Navbar">
<div class="navbar-inner container d-flex justify-content-between align-items-center text-right">
<div class="d-flex flex-column">
<a class="navbar-brand" href="#" title="Logo New Retail Banking Public" rel="home">
<img src="https://cdn.modyo.cloud/uploads/3fc4745c-35c9-4a01-a2dd-30fc9516713e/original/DynamicBank.svg" alt="Logo New Retail Banking Public">
</a>
<a class="visually-hidden-focusable btn btn-dark p-2" href="#content">Skip to main content</a>
</div>
<div class="d-flex justify-content-end align-items-center" id="navbar-menu">
<nav role="navigation" aria-label="Main">
<div class="navbar-collapse" id="main_nav">
<span class="visually-hidden">Main Menu</span>
<ul class="navbar-nav d-none d-lg-flex" role="menu">
<li class="nav-item dropdown has-megamenu" role="none">
<a class="nav-link dropdown-toggle dropdownMegamenu" role="menuitem" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Products & Services
</a>
<div class="dropdown-menu megamenu rounded-top-0" role="menu">
<div class="container-fluid container-lg py-lg-4">
<div class="row">
<div class="col-12 col-lg-3 d-none d-lg-block g-0 g-lg-3">
<p class="h5 mb-2">Products & Services </p>
<p>We offer you different products that will serve your day-to-day needs.</p>
</div>
<div class="col-12 col-lg-3 g-0 g-lg-3">
<p class="d-none d-lg-block h6 mb-3">PRODUCTS</p>
<ul class="list-unstyled" role="menu">
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Credit Cards
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Accounts
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Loans
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Investments
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Insurance
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Digital Wallet
</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3 g-0 g-lg-3">
<p class="d-none d-lg-block h6 mb-3">SERVICES</p>
<ul class="list-unstyled" role="menu">
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Financial Education
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Purchase of foreign currency
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Request your appointment
</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3 d-none d-lg-block g-0 g-lg-3">
<article class="card w-100 bg-secondary-soft">
<div class="card-body d-flex flex-column">
<picture class="mb-3 d-flex">
<source srcset="https://cdn.modyo.cloud/uploads/c1ba2c98-6124-4f0e-b569-c603f6ab1dd1/original/hiveboxx-deX-KChuboY-unsplash.jpg" media="(orientation: portrait)">
<img class="w-100 object-fit-cover rounded-1" src="https://cdn.modyo.cloud/uploads/c1ba2c98-6124-4f0e-b569-c603f6ab1dd1/original/hiveboxx-deX-KChuboY-unsplash.jpg" alt="Mortage Loan">
</picture>
<h6 class="mb-2">Mortage Loan</h6>
<p class="mb-2 text-gray-500">We understand that each person has financial needs, get the money you need to cover personal expenses...</p>
<div class="text-end mt-auto">
<a href="#" class="btn btn-secondary stretched-link">
Learn more
<i class="d-icon bi bi-arrow-right" style="--bs-icon-component-size: 1.5rem; --bs-icon-component-loading-duration: 1.8s; --bs-icon-component-padding: 0;"></i>
</a>
</div>
</div>
</article>
</div>
</div>
</div>
</div> <!-- dropdown-mega-menu.// -->
</li>
<li class="nav-item " role="none">
<a class="nav-link " href="#" role="menuitem" target="_self">
Benefits
</a>
<ul class="dropdown-menu" aria-labelledby="navbar2">
</ul>
</li>
<li class="nav-item " role="none">
<a class="nav-link " href="#" role="menuitem" target="_self">
Help center
</a>
<ul class="dropdown-menu" aria-labelledby="navbar3">
</ul>
</li>
<li class="nav-item " role="none">
<a class="nav-link " href="#" role="menuitem" target="_self">
Branches
</a>
<ul class="dropdown-menu" aria-labelledby="navbar4">
</ul>
</li>
</ul>
<ul class="navbar-nav ms-lg-4" role="menu">
<li class="nav-item" role="none">
<a role="menuitem" href="#" class="link-primary bi bi-search nav-link me-md-3 d-none d-lg-block">
Search
</a></li>
<li class="nav-item" role="none">
<a role="menuitem" href="#" class="btn btn-outline-primary nav-link px-5 d-none d-lg-block">
My Bank
</a></li>
</ul>
</div>
</nav>
<button type="button" class="btn btn-sm btn-light position-relative d-block d-lg-none ms-3" data-bs-toggle="offcanvas" data-bs-target="#menu_panel" aria-controls="menu_panel">
<span id="mainmenulabel" class="visually-hidden">Open Menu</span>
<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Menu Panel -->
<div class="offcanvas offcanvas-end offcanvas-xxl" id="menu_panel" tabindex="-1" aria-labelledby="MenuPabelLabel">
<div class="offcanvas-header border-bottom border-light px-4 py-3 align-items-start justify-content-end">
<a role="menuitem" href="#" class="link-primary bi bi-search nav-link me-md-3 d-none d-lg-block">
Search
</a>
<a role="menuitem" href="#" class="btn btn-outline-primary nav-link px-5">
My Bank
</a>
<button type="button" class="btn btn-sm btn-light btn-close m-0" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanva-body px-4 py-3">
<nav role="navigation" aria-label="Enterprise">
<div class="bg-secondary-soft rounded-1 mb-3">
<div class="nav nav-pills">
<a href="#" class="nav-link rounded-1 active" role="tab" aria-selected="true">
Personal
</a>
<a href="#" class="nav-link rounded-1" role="tab" aria-selected="false">
Business
</a>
</div>
</div>
<ul class="navbar-nav ms-lg-4" role="menu">
<li>
<form action="https://dynamic.modyo.cloud/new-bank/search" method="get" _lpchecked="1">
<div class="form-search input-group rounded-pill">
<input type="text" class="form-control rounded-start-pill" name="query" placeholder="Search" aria-label="Search" aria-describedby="searsh" value="">
<button class="btn btn-primary" title="Search" type="submit" name="commit"><i class="bi bi-search"></i></button>
</div>
</form>
</li>
</ul>
<ul class="navbar-nav" role="menu">
<li class="nav-item dropdown has-megamenu" role="none">
<a class="nav-link dropdown-toggle dropdownMegamenu" role="menuitem" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Products & Services
</a>
<div class="dropdown-menu megamenu rounded-top-0" role="menu">
<div class="container-fluid container-lg py-lg-4">
<div class="row">
<div class="col-12 col-lg-3 d-none d-lg-block g-0 g-lg-3">
<p class="h5 mb-2">Products & Services </p>
<p>We offer you different products that will serve your day-to-day needs.</p>
</div>
<div class="col-12 col-lg-3 g-0 g-lg-3">
<p class="d-none d-lg-block h6 mb-3">PRODUCTS</p>
<ul class="list-unstyled" role="menu">
<li class="nav-item" role="none">
<a href="https://dynamic.modyo.cloud/new-bank/credit-cards" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Credit Cards
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Accounts
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Loans
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Investments
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Insurance
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Digital Wallet
</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3 g-0 g-lg-3">
<p class="d-none d-lg-block h6 mb-3">SERVICES</p>
<ul class="list-unstyled" role="menu">
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Financial Education
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Purchase of foreign currency
</a>
</li>
<li class="nav-item" role="none">
<a href="#" role="menuitem" target="_self" class="nav-link px-lg-0 py-lg-1">
Request your appointment
</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3 d-none d-lg-block g-0 g-lg-3">
<article class="card w-100 bg-secondary-soft">
<div class="card-body d-flex flex-column">
<picture class="mb-3 d-flex">
<source srcset="https://cdn.modyo.cloud/uploads/c1ba2c98-6124-4f0e-b569-c603f6ab1dd1/original/hiveboxx-deX-KChuboY-unsplash.jpg" media="(orientation: portrait)">
<img class="w-100 object-fit-cover rounded-1" src="https://cdn.modyo.cloud/uploads/c1ba2c98-6124-4f0e-b569-c603f6ab1dd1/original/hiveboxx-deX-KChuboY-unsplash.jpg" alt="Mortage Loan">
</picture>
<h6 class="mb-2">Mortage Loan</h6>
<p class="mb-2 text-gray-500">We understand that each person has financial needs, get the money you need to cover personal expenses...</p>
<div class="text-end mt-auto">
<a href="#" class="btn btn-secondary stretched-link">
Learn more
<i class="d-icon bi bi-arrow-right" style="--bs-icon-component-size: 1.5rem; --bs-icon-component-loading-duration: 1.8s; --bs-icon-component-padding: 0;"></i>
</a>
</div>
</div>
</article>
</div>
</div>
</div>
</div> <!-- dropdown-mega-menu.// -->
</li>
<li class="nav-item " role="none">
<a class="nav-link " href="#" role="menuitem" target="_self">
Benefits
</a>
<ul class="dropdown-menu" aria-labelledby="navbar2">
</ul>
</li>
<li class="nav-item " role="none">
<a class="nav-link " href="#" role="menuitem" target="_self">
Help center
</a>
<ul class="dropdown-menu" aria-labelledby="navbar3">
</ul>
</li>
<li class="nav-item " role="none">
<a class="nav-link " href="#" role="menuitem" target="_self">
Branches
</a>
<ul class="dropdown-menu" aria-labelledby="navbar4">
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<style>
.megamenu-backdrop {
--bs-backdrop-zindex: 1050;
--bs-backdrop-bg:var(--bs-gray-900-rgb);
--bs-backdrop-opacity: 0.3;
position: fixed;
top: 0;
left: 0;
z-index: var(--bs-backdrop-zindex);
width: 100vw;
height: 100vh;
background-color: rgba(var(--bs-backdrop-bg),var(--bs-backdrop-opacity));
}
body.openMegamenu {
overflow: hidden;
}
.megamenu a.nav-link {
color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1));
-webkit-text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1));
text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1))
}
.megamenu a.nav-link:hover {
color: RGBA(var(--bs-secondary-900-rgb), var(--bs-link-opacity, 1));
-webkit-text-decoration-color: RGBA(var(--bs-secondary-900-rgb), var(--bs-link-underline-opacity, 1));
text-decoration-color: RGBA(var(--bs-secondary-900-rgb), var(--bs-link-underline-opacity, 1))
}
.openMegamenu header {
z-index: 1051 !important;
}
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
header .navbar { position: inherit;}
.navbar .has-megamenu{position:static!important;}
.navbar .megamenu{left:0; right:0; width:100%; margin-top:0;}
}
/* ============ desktop view .end// ============ */
/* ============ mobile view ============ */
@media(max-width: 991px){
#menu_panel .offcanvas-body .dropdown-menu {
position: relative !important;
transform: none !important;
}
#menu_panel .nav-item{
padding: 1rem 0.5rem;
border-bottom: 1px solid rgb(var(--bs-light-rgb)) !important;
}
#menu_panel .dropdown-menu .nav-item {
border-bottom: none !important;
padding: 0.5rem 0.5rem;
}
#menu_panel .dropdown-menu.megamenu {
box-shadow: none;
padding: 0;
}
}
/* ============ mobile view .end// ============ */
</style>
Other Related experiences
Ready to accelerate how you build your bank?
See for yourself how Dynamic can help your team build better, faster, and more beautiful financial applications
Request a Demo