Menu Dropdowns

Menu Dropdown Container Styling

---

For changing the styling of the menu dropdown container, update the @mixin standard-menu-dropdown-content.

@mixin standard-menu-dropdown-content {
    //style here
    min-width: fit-content;
    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);

    // link text length. this will help size the dropdown
    > li a, > li .brx-submenu-toggle {
        white-space: nowrap;
    }
}

the below line of code is to target the links inside the menu dropdown to make sure they do not wrap onto new lines. You can adjust as needed

// link text length. this will help size the dropdown
    > li a, > li .brx-submenu-toggle {
        white-space: nowrap;
    }

1. If you want to change the background of the dropdown container see the docs here

2. If you want to change the padding it will be from the internal link padding seen in the below step

Menu Dropdown Link Styling

---

To style the links within the menu dropdown we will find the @mixin dropdown-link-style. The padding on the links will alter the "padding" of the container as the container does not have padding.

@mixin dropdown-link-style {
    color: black;
    padding: 2rem 1.4rem;
    
    //hover styling
    &:hover {
        color: white;
        background-color: black;
    }
}

Adding Multi-Level Dropdowns

---

Added with V1.5

Multi-level dropdowns will only work with a menu dropdown and not with a mega menu dropdown.

1. Find a menu dropdown and duplicate it within bricks

2. Drag the duplicate dropdown inside of another menu dropdown. The structure should look like this Menu Dropdown > Content > Menu Dropdown + Nav Link(s)
3. To enable the multi-level function navigate to your SCSS sheet and locate $multi-level-dropdown and turn it to "true"

//MULTILEVEL DROPDOWNS (will turn off some animations to function) ******
$multi-level-dropdown: false; // SELECTION (true/false)

1. Do not turn on multi-level from within the dropdown itself as shown below. It will not work as expected.