Headers
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar.
Header
<div class="container border-bottom mt-2 pb-2">
<div class="row">
<div class="col">
<div class="d-flex align-items-center gap-4">
<div class="d-flex gap-2 align-items-center lh-0 d-none d-md-block">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
class="bi bi-clock-history" viewBox="0 0 16 16">
<path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z"/>
<path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z"/>
<path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5"/>
</svg>
</span>
<span class="fs-6 fw-medium">Time: Mon-Sat 9:00-18:00</span>
</div>
<div class="d-flex gap-2 align-items-center lh-0">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
class="bi bi-telephone-forward" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877zm10.762.135a.5.5 0 0 1 .708 0l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 0 1-.708-.708L14.293 4H9.5a.5.5 0 0 1 0-1h4.793l-1.647-1.646a.5.5 0 0 1 0-.708"/>
</svg>
</span>
<span class="fs-6 fw-medium">0123 456 789</span>
</div>
</div>
</div>
<div class="col-auto">
<div class="d-flex align-items-center gap-4">
<div class="d-flex gap-2 align-items-center lh-0 d-none d-xl-block">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill"
viewBox="0 0 16 16">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
</svg>
</span>
<a href="sign-up.php" class="text-inherit fs-5 fw-medium">Signup</a>
</div>
<!-- Theme toggle — mobile only (below sm), sits just left of Login in the top bar -->
<div class="dropdown d-flex d-sm-none align-items-center gap-2">
<button class="btn btn-light btn-icon rounded-circle d-flex align-items-center justify-content-center p-0" style="width:24px;height:24px;font-size:11px;" type="button"
aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
<i class="bi theme-icon-active"></i>
<span class="visually-hidden bs-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
aria-pressed="false">
<i class="bi theme-icon bi-sun-fill"></i>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
aria-pressed="false">
<i class="bi theme-icon bi-moon-stars-fill"></i>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto"
aria-pressed="true">
<i class="bi theme-icon bi-circle-half"></i>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</div>
<div class="d-flex gap-2 align-items-center lh-0">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-box-arrow-in-right" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z"/>
<path fill-rule="evenodd"
d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"/>
</svg>
</span>
<a href="sign-in.php" class="text-inherit fs-5 fw-medium">Login</a>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-xl bg-white">
<div class="container px-0">
<a class="navbar-brand" href="index.php"><img src="assets/images/brand/logo/logo.svg" alt="Geeks"/></a>
<!-- Right-side actions: theme toggle + Enquire Now + hamburger -->
<div class="d-flex align-items-center order-xl-3 ms-xl-3">
<div class="dropdown me-2 d-none d-xl-flex align-items-center">
<button class="btn btn-light btn-icon rounded-circle d-flex align-items-center" type="button"
aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
<i class="bi theme-icon-active"></i>
<span class="visually-hidden bs-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
aria-pressed="false">
<i class="bi theme-icon bi-sun-fill"></i>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
aria-pressed="false">
<i class="bi theme-icon bi-moon-stars-fill"></i>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto"
aria-pressed="true">
<i class="bi theme-icon bi-circle-half"></i>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</div>
<div class="dropdown me-2 d-none d-sm-flex d-xl-none align-items-center">
<button class="btn btn-light btn-icon rounded-circle d-flex align-items-center" type="button"
aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
<i class="bi theme-icon-active"></i>
<span class="visually-hidden bs-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
aria-pressed="false">
<i class="bi theme-icon bi-sun-fill"></i>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
aria-pressed="false">
<i class="bi theme-icon bi-moon-stars-fill"></i>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto"
aria-pressed="true">
<i class="bi theme-icon bi-circle-half"></i>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</div>
<a href="sign-up.php" class="btn btn-primary d-none d-xl-inline-flex">Enquire now</a>
<button class="navbar-toggler collapsed ms-2 d-xl-none" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar-default" aria-controls="navbar-default" aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<!-- Collapsible nav links -->
<div class="collapse navbar-collapse" id="navbar-default">
<ul class="navbar-nav mt-3 mt-xl-0 ms-auto">
<!-- ══ 1. Domain & Hosting Mega Dropdown ══ -->
<li class="nav-item dropdown dropdown-fullwidth mega-features-dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDomainHosting" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" data-bs-display="static">Domain & Hosting</a>
<div class="dropdown-menu container dropdown-menu-arrow p-3 p-xl-4" aria-labelledby="navbarDomainHosting">
<div class="row g-3 g-xl-4 align-items-start">
<div class="col-lg-4 d-none d-lg-block">
<div class="mega-features-image-wrap border rounded-3 overflow-hidden h-100">
<img src="assets/images/snippets/header-11/header-11-mega-menu.png" alt="Domain & Hosting overview"
class="img-fluid w-100 h-100 object-fit-cover"/>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="row row-cols-1 row-cols-md-2 g-2 g-lg-3">
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/customer-onboarding.png" alt="Domain Registration"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Domain Registration</span>
<small class="d-block text-muted">Find and register the perfect domain for your business</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/webhosting-integration.png" alt="Shared Hosting"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Shared Hosting</span>
<small class="d-block text-muted">Go for the environment that feels right for your business</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wordpress-instance.png" alt="WordPress Hosting"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">WordPress Hosting</span>
<small class="d-block text-muted">Supply a versatile toolkit for essential actions on websites</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/adminstration-handle.png" alt="DNS Management"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">DNS Management</span>
<small class="d-block text-muted">Handle your DNS records and infrastructure with precision</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/billing-integration.png" alt="SSL Certificates"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">SSL Certificates</span>
<small class="d-block text-muted">Secure your sites with trusted SSL/TLS certificates</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wp-cloud-integration.png" alt="Cloud Hosting"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Cloud Hosting <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Let the cloud fuel the backend for your clients' websites</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/collaboration-environment.png" alt="Email Hosting"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Email Hosting</span>
<small class="d-block text-muted">Professional email accounts tied to your custom domain</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/panel-alpha-engine.png" alt="cPanel Control Panel"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">cPanel Control Panel</span>
<small class="d-block text-muted">Manage your hosting environment with a powerful dashboard</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/white-label-reselling.png" alt="Reseller Hosting"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Reseller Hosting <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Start your own hosting business with white-label plans</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/automatic-migration.png" alt="Domain Transfer"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Domain Transfer</span>
<small class="d-block text-muted">Move your existing domain to us quickly and securely</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/developer-toolkit.png" alt="Developer Tools"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Developer Tools</span>
<small class="d-block text-muted">Access Git, SSH, WP-CLI and staging environments with ease</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/next-level-client-panel.png" alt="Client Portal"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Client Portal</span>
<small class="d-block text-muted">Give your clients a branded self-service management portal</small>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- ══ 2. Streaming Mega Dropdown ══ -->
<li class="nav-item dropdown dropdown-fullwidth mega-features-dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarStreaming" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" data-bs-display="static">Streaming</a>
<div class="dropdown-menu container dropdown-menu-arrow p-3 p-xl-4" aria-labelledby="navbarStreaming">
<div class="row g-3 g-xl-4 align-items-start">
<div class="col-lg-4 d-none d-lg-block">
<div class="mega-features-image-wrap border rounded-3 overflow-hidden h-100">
<img src="assets/images/snippets/header-11/header-11-mega-menu.png" alt="Streaming overview"
class="img-fluid w-100 h-100 object-fit-cover"/>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="row row-cols-1 row-cols-md-2 g-2 g-lg-3">
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/collaboration-environment.png" alt="Live Streaming"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Live Streaming</span>
<small class="d-block text-muted">Provide shared access to streams with custom privileges</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/developer-toolkit.png" alt="Video on Demand"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Video on Demand</span>
<small class="d-block text-muted">Offer resources to easily maintain and stream your content</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/panel-alpha-engine.png" alt="Media Server"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Media Server</span>
<small class="d-block text-muted">Utilize Docker-powered media hosting environment</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/white-label-reselling.png"
alt="White-Label Streaming"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">White-Label Streaming <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Let partners resell your streaming services at scale</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/automatic-migration.png" alt="CDN Integration"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">CDN Integration <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Deliver content globally with blazing fast CDN speeds</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/next-level-client-panel.png"
alt="Client Streaming Panel"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Client Streaming Panel</span>
<small class="d-block text-muted">Empower your customers with UX-oriented control panel</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/billing-integration.png" alt="Stream Monetization"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Stream Monetization</span>
<small class="d-block text-muted">Employ flexible billing and paywall models for your streams</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/adminstration-handle.png" alt="Stream Analytics"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Stream Analytics</span>
<small class="d-block text-muted">Track viewer metrics and performance with precision dashboards</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/customer-onboarding.png" alt="Audience Management"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Audience Management</span>
<small class="d-block text-muted">Onboard and segment your viewers with custom access tiers</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wordpress-instance.png" alt="Podcast Hosting"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Podcast Hosting</span>
<small class="d-block text-muted">Host and distribute your podcasts on a reliable platform</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/webhosting-integration.png" alt="Adaptive Bitrate"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Adaptive Bitrate <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Auto-adjust stream quality based on viewer bandwidth</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wp-cloud-integration.png" alt="Cloud Recording"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Cloud Recording</span>
<small class="d-block text-muted">Automatically record and archive all your live sessions</small>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- ══ 3. Dedicated Servers Mega Dropdown ══ -->
<li class="nav-item dropdown dropdown-fullwidth mega-features-dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDedicatedServers" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" data-bs-display="static">Dedicated Servers</a>
<div class="dropdown-menu container dropdown-menu-arrow p-3 p-xl-4" aria-labelledby="navbarDedicatedServers">
<div class="row g-3 g-xl-4 align-items-start">
<div class="col-lg-4 d-none d-lg-block">
<div class="mega-features-image-wrap border rounded-3 overflow-hidden h-100">
<img src="assets/images/snippets/header-11/header-11-mega-menu.png" alt="Dedicated Servers overview"
class="img-fluid w-100 h-100 object-fit-cover"/>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="row row-cols-1 row-cols-md-2 g-2 g-lg-3">
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/adminstration-handle.png" alt="Bare Metal Servers"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Bare Metal Servers</span>
<small class="d-block text-muted">Handle your infrastructure with top precision and performance</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wordpress-instance.png" alt="Managed Servers"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Managed Servers</span>
<small class="d-block text-muted">Supply a versatile toolkit for essential server actions</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/panel-alpha-engine.png" alt="VPS Servers"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">VPS Servers</span>
<small class="d-block text-muted">Utilize Docker-powered virtual server environment</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/developer-toolkit.png" alt="Server Management"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Server Management</span>
<small class="d-block text-muted">Offer resources to easily maintain and customize your servers</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/billing-integration.png" alt="Server Billing"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Server Billing</span>
<small class="d-block text-muted">Employ flexible billing models for your server plans</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/automatic-migration.png" alt="Server Migration"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Server Migration <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Move your servers to our platform in a few clicks</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wp-cloud-integration.png" alt="GPU Servers"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">GPU Servers <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">High-performance GPU instances for AI and rendering workloads</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/collaboration-environment.png" alt="DDoS Protection"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">DDoS Protection</span>
<small class="d-block text-muted">Shield your servers from attacks with enterprise-grade protection</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/customer-onboarding.png" alt="Server Provisioning"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Server Provisioning</span>
<small class="d-block text-muted">Instantly deploy pre-configured servers in minutes</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/webhosting-integration.png" alt="Load Balancing"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Load Balancing</span>
<small class="d-block text-muted">Distribute traffic efficiently across your server cluster</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/white-label-reselling.png" alt="Server Reselling"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Server Reselling</span>
<small class="d-block text-muted">Resell dedicated server capacity under your own brand</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/next-level-client-panel.png" alt="Server Monitoring"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Server Monitoring</span>
<small class="d-block text-muted">Real-time uptime and performance monitoring for all your nodes</small>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- ══ 4. Locations Mega Dropdown ══ -->
<li class="nav-item dropdown dropdown-fullwidth mega-features-dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarLocations" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" data-bs-display="static">Locations</a>
<div class="dropdown-menu container dropdown-menu-arrow p-3 p-xl-4" aria-labelledby="navbarLocations">
<div class="row g-3 g-xl-4 align-items-start">
<div class="col-lg-4 d-none d-lg-block">
<div class="mega-features-image-wrap border rounded-3 overflow-hidden h-100">
<img src="assets/images/snippets/header-11/header-11-mega-menu.png" alt="Locations overview"
class="img-fluid w-100 h-100 object-fit-cover"/>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="row row-cols-1 row-cols-md-2 g-2 g-lg-3">
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/customer-onboarding.png" alt="North America"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">North America</span>
<small class="d-block text-muted">Simplify onboarding processes for US & Canada clients</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/webhosting-integration.png" alt="Europe"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Europe</span>
<small class="d-block text-muted">Go for the environment that feels right for your European business</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/collaboration-environment.png" alt="Asia Pacific"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Asia Pacific</span>
<small class="d-block text-muted">Provide shared access to Asia-Pacific data centres</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wp-cloud-integration.png" alt="Middle East"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Middle East</span>
<small class="d-block text-muted">Let our cloud fuel the backend for your regional websites</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/next-level-client-panel.png" alt="South America"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">South America</span>
<small class="d-block text-muted">Empower your customers across South American markets</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/automatic-migration.png" alt="Africa"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Africa <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Newly launched data centres across the African continent</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/adminstration-handle.png" alt="Central Asia"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Central Asia</span>
<small class="d-block text-muted">Manage infrastructure across Central Asian territories with precision</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/billing-integration.png" alt="Scandinavia"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Scandinavia</span>
<small class="d-block text-muted">Low-latency Nordic data centres with green energy compliance</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/developer-toolkit.png" alt="Southeast Asia"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Southeast Asia <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Expand into fast-growing SEA markets with local edge nodes</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/panel-alpha-engine.png" alt="Oceania"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Oceania</span>
<small class="d-block text-muted">Serve Australian and New Zealand clients from local infrastructure</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/white-label-reselling.png" alt="Eastern Europe"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Eastern Europe</span>
<small class="d-block text-muted">Resell and scale across Eastern European markets with ease</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wordpress-instance.png" alt="South Asia"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">South Asia <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">High-demand data centres covering India and neighbouring regions</small>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- ══ 5. Solutions Link ══ -->
<li class="nav-item">
<a class="nav-link" href="#">Solutions</a>
</li>
<!-- ══ 6. Resources Mega Dropdown ══ -->
<li class="nav-item dropdown dropdown-fullwidth mega-features-dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarResources" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" data-bs-display="static">Resources</a>
<div class="dropdown-menu container dropdown-menu-arrow p-3 p-xl-4" aria-labelledby="navbarResources">
<div class="row g-3 g-xl-4 align-items-start">
<div class="col-lg-4 d-none d-lg-block">
<div class="mega-features-image-wrap border rounded-3 overflow-hidden h-100">
<img src="assets/images/snippets/header-11/header-11-mega-menu.png" alt="Resources overview"
class="img-fluid w-100 h-100 object-fit-cover"/>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="row row-cols-1 row-cols-md-2 g-2 g-lg-3">
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wordpress-instance.png"
alt="WordPress Instances Management"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">WordPress Instances Management</span>
<small class="d-block text-muted">Supply a versatile toolkit for essential actions on websites</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/panel-alpha-engine.png" alt="PanelAlpha Engine"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">PanelAlpha Engine</span>
<small class="d-block text-muted">Utilize Docker-powered web hosting environment</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/wp-cloud-integration.png" alt="WP Cloud Integration"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">WP Cloud Integration</span>
<small class="d-block text-muted">Let WP Cloud fuel the backend for your clients' websites</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/next-level-client-panel.png"
alt="Next-Level Client Panel"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Next-Level Client Panel</span>
<small class="d-block text-muted">Empower your customers with UX-oriented control panel</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/white-label-reselling.png"
alt="White-Label Reselling"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">White-Label Reselling <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Let partners resell your WordPress and grow at scale</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/automatic-migration.png" alt="Automatic Migrations"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Automatic Migrations <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Move WordPress sites to PanelAlpha in a few clicks</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/developer-toolkit.png" alt="API & Developer Docs"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">API & Developer Docs</span>
<small class="d-block text-muted">Explore comprehensive API references and integration guides</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/billing-integration.png" alt="Billing & Invoicing"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Billing & Invoicing</span>
<small class="d-block text-muted">Automate your invoicing and manage subscriptions with ease</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/customer-onboarding.png" alt="Onboarding Guides"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Onboarding Guides</span>
<small class="d-block text-muted">Step-by-step guides to get your clients set up in minutes</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/adminstration-handle.png" alt="Knowledge Base"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Knowledge Base</span>
<small class="d-block text-muted">Search thousands of articles covering every platform feature</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/collaboration-environment.png" alt="Community Forum"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Community Forum <span
class="badge mega-feature-badge--new ms-1">NEW</span></span>
<small class="d-block text-muted">Connect with other users and share tips in our community</small>
</span>
</a>
</div>
<div class="col">
<a class="mega-feature-item d-flex align-items-start gap-3 text-inherit p-2" href="#">
<span class="mega-feature-icon">
<img src="assets/images/snippets/header-11/webhosting-integration.png" alt="Video Tutorials"/>
</span>
<span>
<span class="d-block fw-semibold mb-1">Video Tutorials</span>
<small class="d-block text-muted">Watch in-depth tutorials to master every aspect of the platform</small>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- More (⋯) Dropdown — text label "More", auto-expanded on mobile ══ -->
<li class="nav-item dropdown">
<a class="nav-link d-xl-none" href="#" id="navbarMoreMobile" role="button" data-bs-toggle="collapse"
data-bs-target="#moreDropdownMobile" aria-expanded="true">
More
</a>
<a class="nav-link d-none d-xl-block" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fe fe-more-horizontal"></i>
</a>
<!-- Desktop dropdown (unchanged behaviour) -->
<div class="dropdown-menu container dropdown-menu-md d-none d-xl-block" aria-labelledby="navbarDropdown">
<div class="list-group">
<a class="list-group-item list-group-item-action border-0" href="docs-index.php">
<div class="d-flex align-items-center">
<i class="fe fe-file-text fs-3 text-primary"></i>
<div class="ms-3">
<h5 class="mb-0">Documentations</h5>
<p class="mb-0 fs-6">Browse the all documentation</p>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action border-0" href="docs-bootstrap-5-snippets.php">
<div class="d-flex align-items-center">
<i class="bi bi-files fs-3 text-primary"></i>
<div class="ms-3">
<h5 class="mb-0">Snippet</h5>
<p class="mb-0 fs-6">Bunch of Snippet</p>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action border-0" href="docs-changelog.php">
<div class="d-flex align-items-center">
<i class="fe fe-layers fs-3 text-primary"></i>
<div class="ms-3">
<h5 class="mb-0">
Changelog
<span class="text-primary ms-1" id="changelog"></span>
</h5>
<p class="mb-0 fs-6">See what's new</p>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action border-0" href="https://coderthemes.com/geeks-rtl/"
target="_blank">
<div class="d-flex align-items-center">
<i class="fe fe-toggle-right fs-3 text-primary"></i>
<div class="ms-3">
<h5 class="mb-0">RTL demo</h5>
<p class="mb-0 fs-6">RTL Pages</p>
</div>
</div>
</a>
</div>
</div>
<!-- Mobile inline collapse (auto-expanded) -->
<div class="collapse d-xl-none" id="moreDropdownMobile">
<div class="list-group ms-2 mb-2">
<a class="list-group-item list-group-item-action border-0 px-0" href="docs-index.php">
<div class="d-flex align-items-center">
<i class="fe fe-file-text fs-3 text-primary"></i>
<div class="ms-3">
<h5 class="mb-0">Documentations</h5>
<p class="mb-0 fs-6">Browse the all documentation</p>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action border-0 px-0" href="docs-bootstrap-5-snippets.php">
<div class="d-flex align-items-center">
<i class="bi bi-files fs-3 text-primary"></i>
<div class="ms-3">
<h5 class="mb-0">Snippet</h5>
<p class="mb-0 fs-6">Bunch of Snippet</p>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action border-0 px-0" href="docs-changelog.php">
<div class="d-flex align-items-center">
<i class="fe fe-layers fs-3 text-primary"></i>
<div class="ms-3">
<h5 class="mb-0">
Changelog
<span class="text-primary ms-1" id="changelog-mobile"></span>
</h5>
<p class="mb-0 fs-6">See what's new</p>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action border-0 px-0" href="https://coderthemes.com/geeks-rtl/"
target="_blank">
<div class="d-flex align-items-center">
<i class="fe fe-toggle-right fs-3 text-primary"></i>
<div class="ms-3">
<h5 class="mb-0">RTL demo</h5>
<p class="mb-0 fs-6">RTL Pages</p>
</div>
</div>
</a>
</div>
</div>
</li>
<li class="nav-item d-xl-none mt-2 mb-3">
<a href="sign-up.php" class="btn btn-primary w-100">Enquire now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Language Modal — unchanged -->
<div class="modal fade" id="langaugeModal" tabindex="-1" aria-labelledby="langaugeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="modal-title" id="langaugeModalLabel">Choose a language</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="row row-cols-2 row-cols-lg-3 g-2 g-lg-3">
<a class="text-inherit fw-semibold active" href="#!">English</a>
<a class="text-inherit fw-semibold" href="#!">Deutsch</a>
<a class="text-inherit fw-semibold" href="#!">Español</a>
<a class="text-inherit fw-semibold" href="#!">Français</a>
<a class="text-inherit fw-semibold" href="#!">Indonesia</a>
<a class="text-inherit fw-semibold" href="#!">Italiano</a>
<a class="text-inherit fw-semibold" href="#!">日本語</a>
<a class="text-inherit fw-semibold" href="#!">한국어</a>
<a class="text-inherit fw-semibold" href="#!">Nederlands</a>
<a class="text-inherit fw-semibold" href="#!">Polski</a>
<a class="text-inherit fw-semibold" href="#!">Português</a>
<a class="text-inherit fw-semibold" href="#!">Română</a>
<a class="text-inherit fw-semibold" href="#!">Русский</a>
<a class="text-inherit fw-semibold" href="#!">ภาษาไทย</a>
<a class="text-inherit fw-semibold" href="#!">Türkçe</a>
<a class="text-inherit fw-semibold" href="#!">Tiếng Việt</a>
<a class="text-inherit fw-semibold" href="#!">中文(简体)</a>
<a class="text-inherit fw-semibold" href="#!">中文(繁體)</a>
</div>
</div>
</div>
</div>
</div>