Adding Custom HTML to navigation menu

Question

I have a WordPress ecommerce site that uses the Shoptimizer theme. I wrote a custom sidebar menu in HTML and CSS which I thought we would use on the website, however I've now decided a sidebar menu isn't the way to go.

The whole sidebar menu expands / collapses from a single button, so I would like that button / the complete menu to be integrated into the main navigation menu on the site. However i'm really struggling to understand how to add custom HTML into the navigation menu. I've seen several posts mention the walker class, be these posts don't seem to be using that to add their html?

Can anyone tell me how I could add my custom HTM into the navigation menu? my custom HTML, JS & CSS is below:

function toggleCategories() {
  const categories = document.getElementById('main-categories');
  categories.style.display = categories.style.display === 'none' ? 'block' : 'none';
}


function toggleSubcategories(id) {
  // Find all main categories
  const allCategories = document.querySelectorAll(".category");

  allCategories.forEach((category) => {
    const subcategory = category.nextElementSibling; // Assuming subcategories immediately follow their parent categories

    if (subcategory && subcategory.id !== id) {
      // Collapse other categories
      subcategory.style.display = "none";

      // Collapse all nested subcategories
      const nestedSubcategories = subcategory.querySelectorAll(".subcategory");
      nestedSubcategories.forEach((nested) => {
        nested.style.display = "none";
      });
    }
  });

  // Toggle the clicked category
  const clickedSubcategory = document.getElementById(id);

  if (clickedSubcategory.style.display === "none" || clickedSubcategory.style.display === "") {
    clickedSubcategory.style.display = "block";

    // Expand all nested subcategories
    const nestedSubcategories = clickedSubcategory.querySelectorAll(".subcategory");
    nestedSubcategories.forEach((nested) => {
      nested.style.display = "block";
    });
  } else {
    clickedSubcategory.style.display = "none";

    // Collapse all nested subcategories
    const nestedSubcategories = clickedSubcategory.querySelectorAll(".subcategory");
    nestedSubcategories.forEach((nested) => {
      nested.style.display = "none";
    });
  }
}

body {
  font-family: Arial, sans-serif;
}

.sidebar {
  width: 300px;
  background-color: #f8f9fa;
  padding: 10px;
  border: 1px solid #ddd;
}

.sidebar-title {
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.category {
  cursor: pointer;
  margin: 5px 0;
  padding: 8px;
  background-color: #e9ecef;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.category:hover {
  background-color: #d6d8db;
}

.subcategory {
  margin-left: 10px;
  display: none;
  padding: 5px 0;
}

.subcategory a {
  text-decoration: none;
  color: #007bff;
}

.subcategory a:hover {
  text-decoration: underline;
}

.link-hover {
  position: relative;
  line-height: 1.75;
  width: auto;
}

.link-hover .image-hover {
  display: none;
  position: absolute;
  left: 15em;
  top: 0;
  /* Adjust as needed */
  z-index: 9999;
  /* Ensure it appears above other elements */
  border: 1px solid #ddd;
  /* Optional: Add border to distinguish it */
  background-color: white;
  /* Optional: Set background to prevent overlap issues */
  padding: 5px;
  /* Optional: Add padding for a neat appearance */
  aspect-ratio: 1 / 1;
  /* Maintain 1:1 aspect ratio */
  width: 300px;
  height: auto;
  /* Allow height to adjust naturally */
  object-fit: contain;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
  /* Centering */
  line-height: 150px;
  /* Matches height for vertical centering */
  min-width: 300px;
  /* Prevent shrinking */
  min-height: 300px;
}

.link-hover:hover .image-hover {
  position: absolute;
  left: 15em;
  display: block;
}



  

  
    Horizontal Bandsaw Spares

    
      H Series

      
        Startrite H175
                
              
        


        Startrite H200
                
              
        


        Startrite H225
                
              
        

        Startrite H250 & H330 
                
              
        

      

      HB Series

      
        All HB (Startrite HB225-HB330)        
                
              
        

        H280MV & H280M4
                
              
        

      

      MEBA & METORA

      
        MEBA SM250 & SM320   
                
              
        

        METORA
                
              
      
    


    Vertical Bandsaw Spares

    
      Woodworking Verticals

      
        301, 301S & 301E      
                
              
        

        351 & 352
                
              
        

        351S & 352S      
                
              
        

        BANDIT & 12-S     
                
              
        

      

      Medium Verticals

      
        V, T, R & S Series Bandsaws (Most Popular)
                
              
        

        502 with Footbrake
                
              
        

        502S
                
              
        

      

      Industrial Verticals

      
        216 & 316 
                
              
  
              
        V500
                
              
        

        V900
                
              
        

      
    

    Table Saw Spares

    
      Tilt Arbor

      
        TA145 & TA165    
                
              
        

        TA175 & TA275
                
              
        

        TA255      
                
              
        

        TA300     
                
              
        

        TA1250     
                
              
        

      
    

    Metal Cut Off Saws

    
      Cut Off Saws

      
        CF250, CF275 & CF315  
                
              
        

        CF350 
                
              
        

      
    

    Saw Blades

    
      All Blades

      
        Horizontal Bandsaw Blades
                
              
        

        Vertical Bandsaw Blades - WOOD CUTTING 
                
              
        

        Vertical Bandsaw Blades - METAL CUTTING 
                
              
        

        Table Saw Blades
                
              
        

      
    

    Pillar Drill Spares

    
      Startrite Mercury Drills

      
        Mercury - 5 Speed 
                
              
        

        Mercury - 10 Speed
                
              
        

      
    

    Dust Extractor Spares

    
      Startrite Extractors

      
        Cyclair 55 & 75 
                
              
        

        MDE2 & MDE3

Adding Custom HTML to navigation menu

Answers (1)

Related Questions