# Mega Dropdowns

## Mega Dropdown Container Styling (Desktop)

***

<figure><img src="https://nickarce.com/wp-content/uploads/mega-menu-dropdown-style-1920x1100.jpg.webp" alt=""><figcaption></figcaption></figure>

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.

```scss
@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:

{% embed url="<https://share.zight.com/04udpG4Z>" %}

## Mega Dropdown Container Styling (Mobile)

***

<figure><img src="https://nickarce.com/wp-content/uploads/mobile-mega-content.jpg.webp" alt="" width="563"><figcaption></figcaption></figure>

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.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nickarce.com/bricks-mega-menu/docs/bricks-mega-menu-template/getting-started/dropdowns/mega-dropdowns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.