Skip to content

How to reduce mega menu width in Hestia

Hestia's mega menu uses fixed widths on desktop (750px, 970px, or 1170px depending on the screen size) and spans the full width only on mobile. A single CSS snippet lets you set a custom width.

To reduce the width of the mega menu in Hestia start by going to Appearance->Customize->Additional CSS and add the following code:

.navbar .hestia-mega-menu > .dropdown-menu {
    width: 800px !important;
}

Change the 800 to a lower value to further reduce the menu width.

That's it! Publish your changes and you're done.

Was this helpful?