DOWNLOAD JSON ZIPPED Theme header

DOWNLOAD HERE

PHP CODE (Place in new code on code snippet plugin)

function main_menu_shortcode() {
  ob_start();
  wp_nav_menu([
    'menu' => 'hamburger', // ✅ Change this if your menu has a different name
    'container' => false,
    'menu_class' => 'nav flex-column',
    'fallback_cb' => false,
    'items_wrap' => '<ul class="%2$s">%3$s</ul>',
  ]);
  return ob_get_clean();
}
add_shortcode('hamburger', 'main_menu_shortcode');

Bootstrap html code (place on menu in theme builder

<!-- Menu Toggle Button -->
<button class="menu-toggle-btn ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
  <svg class="menu-icon" viewBox="0 0 100 100" width="50" height="50">
    <rect y="20" width="100" height="7" rx="3"></rect>
    <rect y="45" width="100" height="7" rx="3"></rect>
    <rect y="70" width="100" height="7" rx="3"></rect>
  </svg>
</button>

<!-- Offcanvas Sidebar Menu -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasNavbarLabel"></h5>
    <button class="custom-close-btn" type="button" data-bs-dismiss="offcanvas" aria-label="Close">
      <i class="fas fa-times"></i> <!-- Font Awesome close icon -->
    </button>
  </div>

  <div class="offcanvas-body">
    <div class="offcanvas-inner">

      [hamburger] <!-- ✅ This pulls your main menu -->

    </div> <!-- End offcanvas-inner -->
  </div>
</div>

JS CODE (Place on integration – Head)

<!-- ✅ Bootstrap 5 CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<!-- ✅ Bootstrap 5 Bundle JS (required for off-canvas) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  /* ======================================================
     DESKTOP MENU — CLICK TO OPEN  (only when > 980 px wide)
  ====================================================== */
  const nav = document.querySelector("#offcanvasNavbar .offcanvas-body");

  if (nav && window.innerWidth > 980) {
    const dropdowns = nav.querySelectorAll(".menu-item-has-children");

    dropdowns.forEach(item => {
      const trigger = item.querySelector("a");

      if (trigger) {
        trigger.addEventListener("click", function (e) {
          e.preventDefault();

          const submenu = item.querySelector(".sub-menu");

          /* close *only* siblings at the same depth
             (skip ancestors & descendants)  */
          dropdowns.forEach(other => {
            if (
              other !== item &&
              !item.contains(other) &&      // other is not inside item
              !other.contains(item)         // item is not inside other
            ) {
              other.classList.remove("open");
              const otherSub = other.querySelector(".sub-menu");
              if (otherSub) otherSub.style.display = "none";
            }
          });

          /* toggle the one that was clicked */
          item.classList.toggle("open");
          if (submenu) {
            submenu.style.display = item.classList.contains("open")
              ? "block"
              : "none";
          }
        });
      }
    });
  }

  /* ======================================================
     MOBILE MENU  (unchanged)
  ====================================================== */
  function initMobileMenuToggles() {
    const menu = document.querySelector("ul.et_mobile_menu");
    if (!menu) return;

    const dropdownItems = menu.querySelectorAll(
      "li.menu-item-has-children, li.page_item_has_children"
    );

    dropdownItems.forEach(item => {
      if (!item.querySelector(".mobile-toggle")) {
        const toggle = document.createElement("a");
        toggle.href = "#";
        toggle.className = "mobile-toggle";
        toggle.textContent = "+";
        item.appendChild(toggle);

        toggle.addEventListener("click", function (e) {
          e.preventDefault();
          item.classList.toggle("dt-open");

          const submenu = item.querySelector("ul.children, ul.sub-menu");
          if (submenu) submenu.classList.toggle("visible");

          toggle.textContent = item.classList.contains("dt-open") ? "-" : "+";
        });
      }
    });
  }

  const hamburger = document.querySelector(".mobile_menu_bar");
  if (hamburger) {
    hamburger.addEventListener("click", function () {
      document.body.classList.toggle("menu-opened");

      if (document.body.classList.contains("menu-opened")) {
        setTimeout(initMobileMenuToggles, 100);
      }
    });
  }
});
</script>

Menu social code

<a href="https://facebook.com/yourpage" target="_blank"><i class="fab fa-facebook-f"></i></a> <a href="https://instagram.com/yourusername" target="_blank"><i class="fab fa-instagram"></i></a> <a href="https://youtube.com/yourchannel" target="_blank"><i class="fab fa-twitter"></i></a>

CSS CODE

/* ===================================================================
   TABLE OF CONTENTS
   -------------------------------------------------------------------
   1. General Offcanvas Menu Styling
      1.1. Offcanvas Container & Layout
      1.2. Offcanvas Header
      1.3. Offcanvas Body & Inner Content
      1.4. Offcanvas Width Settings
   2. Menu Toggle Button (Hamburger Icon)
   3. General Menu Link Styling
      3.1. Main Menu Links
      3.2. Submenu Links
      3.3. Hover States
      3.4. List Reset
   4. Dropdown Menus (Hover & Click-Based Behavior)
      4.1. Parent Item Styling
      4.2. Arrow Symbols
      4.3. Submenu Container Styling
      4.4. Submenu Indentation
      4.5. Submenu Visibility (JS Controlled)
   5. Social Icons
      5.1. Offcanvas Social Icons
      5.2. Mobile Menu Social Icons
   6. Mobile Menu Styling (Divi Specific)
      6.1. Mobile Menu Container
      6.2. Mobile Menu Links
      6.3. Mobile Menu Toggle Icon (+/-)
      6.4. Mobile Submenu Visibility
      6.5. Mobile Submenu Link Styling
   7. Divi Specific Fixes
=================================================================== */

/* Define a grayish-black color variable for consistency */
:root {
  grayish-black: #333333; /* A dark gray for hover effects */
}

/* ===================================================================
   1. GENERAL OFFCANVAS MENU STYLING
=================================================================== */

/* 1.1. Offcanvas Container & Layout */
#offcanvasNavbar.offcanvas-end {
  width: 650px;
  max-width: 90%;
}

/* 1.2. Offcanvas Header */
#offcanvasNavbar .offcanvas-header {
  padding-top: 50px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#offcanvasNavbar .offcanvas-title,
#offcanvasNavbarLabel {
  color: black; /* Changed to black */
  font-size: 40px;
  text-align: left;
}

#offcanvasNavbar .custom-close-btn {
  font-size: 40px;
  font-weight: thin;
  color: black; /* Changed to black */
  background: none;
  border: none;
}

#offcanvasNavbar .custom-close-btn:hover {
  color: var(--grayish-black); /* Changed to grayish-black */
}

/* 1.3. Offcanvas Body & Inner Content */
#offcanvasNavbar .offcanvas-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#offcanvasNavbar .offcanvas-inner {
  height: 100vh;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-left: 25px;
  padding-right: 25px;
}

#offcanvasNavbar .offcanvas-inner::-webkit-scrollbar {
  width: 0px;
  background: transparent;
  display: none;
}

/* 1.4. Offcanvas Width Settings */
@media (max-width: 767px) {
  #offcanvasNavbar.offcanvas-end {
    width: 100vw;
    max-width: 100vw;
  }
}



/* ===================================================================
   2. MENU TOGGLE BUTTON (Hamburger Icon)
=================================================================== */

.menu-toggle-btn {
  background: none;
  border: none;
  padding: 0;
}

.menu-toggle-btn svg rect {
  fill: black; /* Changed to black */
  transition: fill 0.3s;
}

.menu-toggle-btn:hover svg rect {
  fill: var(--grayish-black); /* Changed to grayish-black */
}



/* ===================================================================
   3. GENERAL MENU LINK STYLING
=================================================================== */

/* 3.1. Main Menu Links */
#offcanvasNavbar .offcanvas-body .menu-item a {
  font-size: 24px;
  font-weight: 700;
  color: black; /* Changed to black */
  padding: 10px 0;
  margin-bottom: 4px;
  display: block;
  text-decoration: none !important;
  text-align: left;
  transition: color 0.3s;
  width: 100%;
  background: transparent !important;
}

/* Parent items stay black by default */
#offcanvasNavbar .offcanvas-body .menu-item > a {
  color: black; /* Remains black */
}

/* 3.2. Submenu Links */
#offcanvasNavbar .offcanvas-body .sub-menu a {
  padding: 0.5px;
  margin: 1.5px;
  line-height: 1.3;
  font-weight: 600;
  font-size: 22px;
  color: black; /* Changed to black */
}

/* Level-2 (grand-child menu) */
#offcanvasNavbar .offcanvas-body .sub-menu .sub-menu a {
  color: black; /* Remains black */
  font-size: 20px;
}

/* Level-3 (great-grand-child) — optional */
#offcanvasNavbar .offcanvas-body .sub-menu .sub-menu .sub-menu a {
  color: black; /* Changed to black */
  font-size: 20px;
}

/* Level-4 (rare) */
#offcanvasNavbar .offcanvas-body .sub-menu .sub-menu .sub-menu .sub-menu a {
  color: black; /* Remains black */
}

/* 3.3. Hover States */
/* Parent hover */
#offcanvasNavbar .offcanvas-body .menu-item > a:hover {
  color: var(--grayish-black); /* Changed to grayish-black */
}

/* Submenu hover */
#offcanvasNavbar .offcanvas-body .sub-menu a:hover {
  color: var(--grayish-black); /* Changed to grayish-black */
}

/* Level-2 hover */
#offcanvasNavbar .offcanvas-body .sub-menu .sub-menu a:hover {
  color: var(--grayish-black); /* Changed to grayish-black */
}

/* Level-3 hover */
#offcanvasNavbar .offcanvas-body .sub-menu .sub-menu .sub-menu a:hover {
  color: var(--grayish-black); /* Changed to grayish-black */
}

/* Level-4 hover */
#offcanvasNavbar .offcanvas-body .sub-menu .sub-menu .sub-menu .sub-menu a:hover {
  color: var(--grayish-black); /* Changed to grayish-black */
}

/* 3.4. List Reset */
/* Remove bullets and default padding/margin from lists */
#offcanvasNavbar .offcanvas-body ul,
#offcanvasNavbar .offcanvas-body li {
  list-style: none;
  margin: 0;
  padding: 0;
}



/* ===================================================================
   4. DROPDOWN MENUS (Hover & Click-Based Behavior)
=================================================================== */

/* 4.1. Parent Item Styling */
/* Parent must be relative to anchor submenu positioning */
#offcanvasNavbar .offcanvas-body .menu-item-has-children {
  position: relative;
}

#offcanvasNavbar .offcanvas-body .menu-item-has-children > a {
  position: relative;
  padding-right: 30px;
}

/* 4.2. Arrow Symbols */
/* Arrow symbol for parent items */
#offcanvasNavbar .offcanvas-body .menu-item-has-children > a::after {
  content: "⌵";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: black; /* Changed to black */
  transition: transform 0.3s ease;
}

/* Arrow: default down, rotate only when OPEN */
#offcanvasNavbar .offcanvas-body .menu-item-has-children > a::after {
  transform: translateY(-50%);
}

#offcanvasNavbar .offcanvas-body .menu-item-has-children.open > a::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Nested levels use + / – instead of the arrow */
#offcanvasNavbar .offcanvas-body .sub-menu .menu-item-has-children > a::after {
  content: "+";
  /* plus when closed */
  font-size: 30px;
  color: black; /* Changed to black */
  transform: translateY(-50%);
  /* keep it centred; no rotation */
}

#offcanvasNavbar .offcanvas-body .sub-menu .menu-item-has-children.open > a::after {
  content: "–";
  /* minus when open */
  font-size: 30px;
}

/* 4.3. Submenu Container Styling */
/* Submenu base: dropdown without layout shift */
#offcanvasNavbar .offcanvas-body ul.sub-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute !important;
  /* overlay for first load */
  top: 100%;
  left: 0;
  z-index: 999;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: white; /* Remains white */
  box-shadow: none !important;
  transition: opacity 0.3s ease;
}

/* Make level-2 containers flow like level-1 */
#offcanvasNavbar .offcanvas-body ul.sub-menu ul.sub-menu {
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  position: static !important;
  /* behaves like first level */
  background: white; /* Remains white */
  box-shadow: none !important;
}

/* 4.4. Submenu Indentation */
/* First-level submenu: indent visually 5px */
#offcanvasNavbar .offcanvas-body .menu-item-has-children > .sub-menu {
  margin-left: 5px !important;
  padding-left: 5px !important;
  width: calc(100% - 5px) !important;
}

/* Second-level submenu: indent 20px */
#offcanvasNavbar .offcanvas-body ul.sub-menu > .menu-item-has-children > .sub-menu {
  margin-left: 20px !important;
  padding-left: 10px !important;
  width: calc(100% - 20px) !important;
}

/* Third-level submenu: indent 30px */
#offcanvasNavbar .offcanvas-body ul.sub-menu ul.sub-menu > .menu-item-has-children > .sub-menu {
  margin-left: 30px !important;
  padding-left: 10px !important;
  width: calc(100% - 30px) !important;
}

/* Fourth-level submenu: indent 40px */
#offcanvasNavbar .offcanvas-body ul.sub-menu ul.sub-menu ul.sub-menu > .menu-item-has-children > .sub-menu {
  margin-left: 40px !important;
  padding-left: 10px !important;
  width: calc(100% - 40px) !important;
}

/* 4.5. Submenu Visibility (JS Controlled) */
/* Hide submenus by default */
#offcanvasNavbar .offcanvas-body .menu-item-has-children > .sub-menu {
  display: none;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  margin-top: 10px;
}

/* Base state: submenu hidden */
#offcanvasNavbar .offcanvas-body .menu-item-has-children > .sub-menu {
  display: none;
}

/* Show submenu only when parent has class 'open' (set via JS) */
/* Keep every level in normal flow when open */
#offcanvasNavbar .offcanvas-body .menu-item-has-children.open > .sub-menu {
  display: block;
  position: static !important;
}

/* Clicked state: submenu visible */
#offcanvasNavbar .offcanvas-body .menu-item-has-children.open > .sub-menu {
  display: block;
}



/* ===================================================================
   5. SOCIAL ICONS
=================================================================== */

/* 5.1. Offcanvas Social Icons */
#offcanvasNavbar .offcanvas-social {
  text-align: left;
  margin-top: 15px !important;
  margin-bottom: 20px;
}

#offcanvasNavbar .offcanvas-social a {
  color: black; /* Changed to black */
  font-size: 24px;
  margin-right: 12px;
  transition: color 0.3s ease;
}

#offcanvasNavbar .offcanvas-social a:hover {
  color: var(--grayish-black); /* Changed to grayish-black */
}

/* 5.2. Mobile Menu Social Icons */
@media only screen and (max-width: 980px) {
  .et_mobile_menu .menu-item.social-icons {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .et_mobile_menu .menu-item.social-icons a {
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    color: white !important; /* Retained white for mobile social icons */
  }
}

.et_mobile_menu .menu-item.socials {
  display: flex;
  justify-content: flex-start;
  align-items: left;
  gap: 10px;
  padding: 10px 15px 25px 25px; /* Matches Divi menu padding */
  width: 100%;
  margin: 20px;
  margin-left: -63px;
  box-sizing: border-box;
}

.et_mobile_menu .menu-item.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: white; /* Remains white */
  border-radius: 50%;
  font-size: 30px;
  color: black !important; /* Changed to black */
  text-decoration: none !important;
  transition: background 0.3s ease;
  margin: 0;
  /* Remove any browser default margin */
  padding: 0;
}



/* ===================================================================
   6. MOBILE MENU STYLING (Divi Specific)
=================================================================== */

/* 6.1. Mobile Menu Container */
.et_mobile_menu {
  width: 100% !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  position: fixed !important;
  top: 90px !important;
  z-index: 9999;
  background-color: black; /* Changed to black */
  padding-top: 20px;
  box-sizing: border-box;
  display: none;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}

body.menu-opened {
  overflow-x: hidden;
}

.menu-opened .et_mobile_menu {
  display: block;
}

.et_mobile_menu ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
}

.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
  background-color: white !important; /* Remains white */
  border-radius: 10px;
}

/* 6.2. Mobile Menu Links */
.et_mobile_menu a {
  text-decoration: none !important;
}

.et_mobile_menu a,
.et_mobile_menu .menu-item-has-children > a {
  background-color: white !important; /* Remains white */
  color: black !important; /* Remains black */
}

ul.et_mobile_menu > li.menu-item-has-children,
ul.et_mobile_menu > li.page_item_has_children {
  position: relative;
}

ul.et_mobile_menu li.menu-item-has-children > a::after,
ul.et_mobile_menu li.page_item_has_children > a::after {
  content: none !important;
}

/* 6.3. Mobile Menu Toggle Icon (+/-) */
/* Style the mobile menu icon (hamburger and X) */
.mobile_menu_bar {
  font-size: 40px;
  color: black; /* Changed to black */
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 2px;
  z-index: 10001;
}

/* Use ETModules icon font for mobile toggle */
.mobile_menu_bar::before {
  content: '\61';
  /* Hamburger */
  font-family: 'ETModules';
  transition: content 0.3s ease;
}

.menu-opened .mobile_menu_bar::before {
  content: '\4d';
  /* Close (X) */
  color: black !important; /* Changed to black */
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
  width: 44px;
  height: 100%;
  padding: 0 !important;
  max-height: 44px;
  border: none;
  position: absolute;
  right: 0;
  top: 16px;
  z-index: 999;
  background-color: transparent;
  font-family: Arial, sans-serif;
  font-size: 30px;
  color: black !important; /* Changed to black */
  display: inline-block;
  text-align: center;
  opacity: 1;
}

/* 6.4. Mobile Submenu Visibility */
ul.et_mobile_menu .menu-item-has-children .sub-menu {
  display: none !important;
  visibility: hidden !important;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
  display: block !important;
  visibility: visible !important;
}

/* Allow nested submenus (2nd level, 3rd level, etc.) to be visible when toggled */
ul.et_mobile_menu .sub-menu .sub-menu {
  display: none !important;
  visibility: hidden !important;
}

ul.et_mobile_menu .sub-menu.visible .sub-menu {
  display: block !important;
  visibility: visible !important;
}

/* 6.5. Mobile Submenu Link Styling */
/* Keep submenu links styled consistently */
ul.et_mobile_menu .sub-menu a {
  background-color: white !important; /* Remains white */
  color: black !important; /* Remains black */
  padding-left: 4px;
  /* indent sub-levels */
  font-weight: normal;
}

/* Optional: Add more indent for deeper levels */
ul.et_mobile_menu .sub-menu .sub-menu a {
  padding-left: 10px;
}

ul.et_mobile_menu .sub-menu .sub-menu .sub-menu a {
  padding-left: 20px;
}



/* ===================================================================
   7. DIVI SPECIFIC FIXES
=================================================================== */

/* Ensures Divi buttons maintain text-decoration */
.et_pb_button,
.et_pb_promo_button,
.et_pb_more_button,
button.et_pb_button,
a.et_pb_button {
  text-decoration: none !important;
}

/* Removes default borders/shadows from offcanvas submenus */
#offcanvasNavbar .offcanvas-body ul.sub-menu {
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
}

/* Divi specific: Superscript font size */
.et_pb_text sup {
  font-size: 75%;
}