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 (deprecated at V1.5.5)

---

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. WARNING: Do not turn on multi-level from within the dropdown itself as shown below. It will not work as expected.

1. Change the below value in the SCSS sheet to true to enable multi-level support. (deprecated as of 1.5.5)

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

Creating Dropdowns from the Wordpress Menu System

If you want to use the default menu system that worpress gives you, you can now create individual dropdowns using the menu builder inside of wordpress. Here is a tutorial on how to do it: