Mega Dropdowns

Mega Dropdown Container Styling (Desktop)

---

The styling for the mega dropdown container on desktop is handled within the @mixin mega-dropdown-content and can be adjusted to your liking. By default it is set to display its children in a row.

@mixin mega-dropdown-content {
    //style here
    padding: 2rem;
    gap: 2rem;
    box-shadow: 119px 360px 152px rgba(0, 0, 0, 0.01), 67px 203px 128px rgba(0, 0, 0, 0.05), 30px 90px 95px rgba(0, 0, 0, 0.09), 7px 23px 52px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    flex-direction: row;
}

Mega Dropdown Width (Desktop)

---

The width of the container is dictated from within bricks styling by choosing an element in your structure panel to inherit the width of. for example if you want it to be full width we will target the .header for the width. If we want it to be our website container width we can target .header__container. See Video below:

Mega Dropdown Container Styling (Mobile)

---

To style the container on mobile you will update the styling within @mixin dropdown-content-mobile. By default it is set to show its children in a column.

@mixin dropdown-content-mobile {
    //style here
    flex-direction: column;
}