I have come up with this css that will enable you to create a mega menu in Astra by using special css classes in the menu (actually, it is used in the menu of this website)
this is the structure you should follow (go to Appearance-> menus)
– Snippets class: has-mega-menu
For adding an image:https://image url” > class: mega-menu-column
You might need to make certain adjustments, if you need help contact me.
Copy
/*scc code*/
/* Mega menu */
@media screen and (min-width: 900px){
li.has-mega-menu .sub-menu {
min-width: 100% !important;
z-index: 10000;
transform: translate(-50%, 1px) !important;
width: fit-content !important;
left: -100% !important;
display: flex;
}
li.has-mega-menu:hover .sub-menu{
opacity: 1 !important;
visibility: visible !important;
position: absolute;
display: flex;
grid-template-columns: repeat(auto-fit,minmax(10%, 1fr));
}
/* First level */
li.mega-menu-column {
min-width: 180px !important;
max-width: 210px !important;
padding: 12px 7px;
justify-content: flex-start !important;
}
li.mega-menu-column .sub-menu {
display: flex !important;
flex-direction: column !important;
box-shadow: none !important;
position: static !important;
transform: translateY(0em) !important;
transition: visibility 2s ease,transform 2s ease;
width:100% !important;
}
li.mega-menu-column span.ast-icon.icon-arrow {
display: none !important;
}
li.mega-menu-column.menu-item > .menu-link {
font-weight: 600 ;
}
.mega-menu-column img {
display: block;
}
.mega-menu-column img:hover {
transform: scale(1.02);
transition: transform .2s ease-in-out;
}
}
