AstraHTML

Custom Mega Menu in wordpress (Astra theme) without a plugin

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
– – Woocommerce class: mega-menu-column
– – – Checkout Class:
– – – Product Class:
– – – Thank you page Class:

For adding an image:
– Snippets class: has-mega-menu
– – Navigation Label: Need Help? <img src=”https://image url”> class: mega-menu-column

You might need to make certain adjustments, if you need help contact me.

    
/*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; } }

Leave a Reply