<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">
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>
let megamenuOpen = false;
function addBackdrop() {
if (!megamenuOpen) {
const backdrop = document.createElement('div');
backdrop.className = 'megamenu-backdrop';
document.body.appendChild(backdrop);
megamenuOpen = true;
}
}
function removeBackdrop() {
const backdrop = document.querySelector('.megamenu-backdrop');
if (backdrop) {
backdrop.parentNode.removeChild(backdrop);
megamenuOpen = false;
}
}
function openMegamenu() {
addBackdrop();
document.body.classList.add("openMegamenu");
}
function closeMegamenu() {
const openMegamenus = document.querySelectorAll('.dropdownMegamenu.show');
if (openMegamenus.length === 1) {
removeBackdrop();
document.body.classList.remove("openMegamenu");
}
}
const toggleMegamenus = document.querySelectorAll('.dropdownMegamenu');
toggleMegamenus.forEach(toggleMegamenu => {
toggleMegamenu.addEventListener('show.bs.dropdown', event => {
openMegamenu();
});
toggleMegamenu.addEventListener('hide.bs.dropdown', event => {
clMegamenu();
});
});
