How can I edit the Dawn Mega Menu to display multiple subheading columns?

Store Design
1

Good Morning

I hope you can help

I am trying to edit the Dawn Mega Menu to show the sub headings in multiple columns in stead of just one long column. For example 3 or 4 headings per column across the width of the page.

I would also like to have the shop products dropdown to show on however instead of having to click.

Any ideas would be appreciated

Screenshot 2023-06-15 100420.png
Screenshot 2023-06-15 100420.png1809×429 16 KB

2

*hover

3
  1. To display the subheadings in multiple columns, you can utilize CSS flexbox or CSS grid. Wrap the subheadings in a container element and apply the appropriate CSS properties to create columns. For example, you can use the display: flex property on the container and adjust the flex-wrap, justify-content, and align-items properties to control the layout. Here’s an example CSS code snippet:
.menu-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.menu-columns li {
  width: 25%; /* Adjust the width based on the number of columns you want */
}
  1. To show the shop products dropdown on hover instead of click, you’ll need to add some JavaScript code. Find the JavaScript code responsible for handling the menu behavior and modify it to include a hover event listener. When the parent menu item is hovered, you can add a class or modify the CSS properties of the dropdown element to make it visible. Here’s an example JavaScript code snippet:
const menuItem = document.querySelector('.menu-item-with-dropdown');
const dropdown = document.querySelector('.dropdown-menu');

menuItem.addEventListener('mouseover', () => {
  dropdown.classList.add('show');
});

menuItem.addEventListener('mouseout', () => {
  dropdown.classList.remove('show');
});
​
4

Thank you for the help. I am very new to this so I have very little understanding of what you have put above. Where do I find these things so i can edit them?