Mobile Friendly Menu

add custom.js

document.addEventListener("DOMContentLoaded", function () {
const menuToggle = document.querySelector(".menu-toggle");
const mainNavigation = document.querySelector(".main-navigation");

const menuIcon = document.querySelector(".menu-toggle i");

menuToggle.addEventListener("click", function () {
mainNavigation.classList.toggle("mobile-menu-open");

if (mainNavigation.classList.contains("mobile-menu-open")) {
  menuIcon.classList.add("rotate-icon");
} else {
  menuIcon.classList.remove("rotate-icon");
}
});
const menuItems = document.querySelectorAll(".menu-item");

menuItems.forEach(function (item) {
item.addEventListener("click", function (event) {
mainNavigation.classList.remove("mobile-menu-open");
menuIcon.classList.remove("rotate-icon");
});
});
});

Add to functions.php

class [your-theme-name]_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
    // Add "has-submenu" class to top-level items with submenus
    if ( in_array( 'menu-item-has-children', $item->classes ) && $depth === 0 ) {
      $item->classes[] = 'has-submenu';
    }
    // Continue with the default start_el() method
    parent::start_el( $output, $item, $depth, $args );
  }
}

function [your-theme-name]_enqueue_scripts() {
    wp_enqueue_script('[your-theme-name]-custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}

add_action('wp_enqueue_scripts', '[your-theme-name]_enqueue_scripts');

Add to Header.php

<nav id="site-navigation" class="main-navigation">
  <?php
  wp_nav_menu(
    array(
      'theme_location' => 'primary',
      'menu_id'        => 'primary-menu',
      'walker'         => new [your-theme-name]_Walker_Nav_Menu(),
    )
  );
  ?>
</nav><!-- #site-navigation -->

Add to style.css

/* Navigation */
.main-navigation {
  width: 300px;
}

.main-navigation ul,
.sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-navigation a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: #FFF;
  transition: background-color 0.3s, color 0.3s;
}

.main-navigation a:hover {
  background-color: #FF4F00;
  color: #fff;
}

.main-navigation.mobile-menu-open .sub-menu {
  display: block;
  max-height: 400px; /* Adjust max-height as needed */
  overflow: visible;
}

.main-navigation ul.sub-menu a {
  color: #fff;
}

.main-navigation ul.sub-menu a:hover {
  background-color: #FF4F00;
}

.main-navigation.mobile-menu-open ul.sub-menu {
  max-height: 400px; /* Adjust max-height as needed */
  overflow: visible;
}

.menu-toggle {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.menu-toggle.rotate {
  transform: rotate(360deg);
}

.menu-toggle p {
  margin: 0;
  padding-left: 0.2em;
}

.menu-toggle i {
   transition: transform 1s ease;
}

/* Rotate the icon when the "rotate-icon" class is applied */
.menu-toggle i.rotate-icon {
  transform: rotate(180deg);
}

.main-navigation ul,
.main-navigation ul.sub-menu {
  display: none;
}

.main-navigation.mobile-menu-open ul,
.main-navigation.mobile-menu-open ul.sub-menu {
  display: block;
  max-height: 400px; /* Adjust max-height as needed */
  overflow: visible;
  transition: max-height 1s ease-out;
}


/* CSS for submenus on larger screens */
@media screen and (min-width: 48.6em) {

	.main-navigation a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: #FFF; /* Text color */
}
	
/* Add hover behavior for all links */
.main-navigation a:hover {
  background-color: FF4F00; /* Hover background color */
  color: #fff;
}

/* Display submenus on hover */
.main-navigation li:hover > ul.sub-menu {
  display: block;
}

/* Style submenu links */
.main-navigation ul.sub-menu a {
  color: #fff;
}

/* Hover behavior for links inside submenus */
.main-navigation ul.sub-menu a:hover {
  background-color: #FF4F00; /* Hover background color */
}
}