Make main menu have a hover sub menu

[AndrewG123]

I am using the mode theme. I am trying to make the sub menu of the main menu pop up when I hover over it instead of having to click it. Please help with what code I need to add.

store link https://twisteraudio.com/

[Small_Task_Help]

Hi,

You can try Custom css and for that first Identify the CSS Classes and at theme.scss.liquid or theme.css file or similar need to add CSS code and test

Code example for Hover Effect

/* Show sub-menu on hover */
.main-menu .has-sub-menu {
  position: relative;
}

.main-menu .has-sub-menu:hover .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

.sub-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%; /* Adjust based on your menu design */
  left: 0;
  z-index: 9999;
  background-color: #fff; /* Adjust as per your theme */
  transition: opacity 0.3s ease;
}

/* Additional styling for smoother appearance */
.main-menu .sub-menu {
  min-width: 200px; /* Adjust as necessary */
  padding: 10px; /* Adjust as necessary */
}

[AndrewG123]

Where exactly do I put this code? Im not that good at the coding aspect of shopify.