Bug Issue 1989 Resolved: Hamburger menu has been generalized

[vivirincond]

FIXED:🪲[Bug]: Missing items in the hamburger menu

Closes: #1989

Description

Edited the files: blog.html, donate.html, reportstary.html, and volunteer.html with this snippet of code for the hamburger navigation bar to maintain a centralized and consistent theme:

The previous navigation hamburger menus follow the same logistical conventions, including the linking of pages, the main difference made was ensuring that the same navigation bar code was consistent across the other pages and replaced to match accordingly.

`

  <div class="nav-item">
    <li>
      <a
        href="/index.html"
        class="lg:p-1 text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
      >Meet Pets</a>
    </li>
  </div>

  <li>
    <a
      href="/about.html"
      class="lg:p-1 text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
    >About Us</a>
  </li>

  <li>
    <a
      href="/news.html"
      class="lg:p-1 text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
    >Pet News</a>
  </li>

  <li>
    <a
      href="/blog.html"
      class="lg:p-1 text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
    >Blogs</a>
  </li>

  <li>
    <a
      href="/donate.html"
      class="lg:p-1 text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
    >Donate</a>
  </li>

  <li>
    <div x-data="{ open: false }" @mouseleave="open = false" class="relative">
      <a @mouseover="open = true" class="lg:p-1 text-custom-heading flex font-bold underline-offset-4 turn-red-hover navbar-item">
        Support Us
        <svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="mt-1">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </a>
      <div x-show="open" class="z-20 absolute -left-1 w-[7.5rem] py-2 bg-gray-100 rounded-md shadow-xl hover:bg-gray-400">
        <a href="/volunteer.html" class="remover block px-4 py-2 text-base text-gray-300 text-gray-700 hover:text-white">Become a Volunteer</a>
      </div>
    </div>
  </li>

  <li>
    <a
      href="/reportstary.html"
      class="lg:p-1 text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
    >SOS Report</a>
  </li>

  <li>
    <a href="/contact.html"
      class="lg:p-1 text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item remover">
      <button class="flex inline-flex items-center bg-header-orange-light border-0 py-2 lg:py-2 text-choco text-base px-2 focus:outline-none text_4 font-bold rounded mt-4 md:mt-0 hover:bg-hover-choco hover:translate-x-2 transition-transform text-light-mode">
        Contact Us
        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          class="w-4 h-4 ml-1 transform translate-x-0 transition-transform" viewBox="0 0 24 24">
          <path d="M5 12h14M12 5l7 7-7 7"></path>
        </svg>
      </button>
    </a>
  </li>

  <li>
    <a id="theme-toggle" class="remover">
      <i class="ri-sun-line light-theme" id="switch"></i>
    </a>
  </li>

  <!-- Google Translate -->
  <div id="google_translate_element">
    <script
      type="text/javascript"
      src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
    </script>
  </div>
</ul>

`

The only page that was unable to be fixed was blog.html due to it having general page styling and sizing issues that prevent the integration of an adaptable navigation hamburger bar to be integrated properly and match up appropriately with the rest of the pages.

Screenshots

SOS Page Hamburger Menu:

Other correctly working page for reference:

Checklist

• My code adheres to the established style guidelines of the project.
• I have included comments in areas that may be difficult to understand.
• My changes have not introduced any new warnings.
• I have conducted a self-review of my code.

[vercel]

@vivirincond is attempting to deploy a commit to the akshitagupta15june's projects Team on Vercel.

A member of the Team first needs to authorize it.