> For the complete documentation index, see [llms.txt](https://docs.nickarce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nickarce.com/bricks-mega-menu/docs/bricks-mega-menu-template/getting-started/dropdowns/mega-dropdowns.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
