Documentation
Nickarce.com
  • ⏳Changelogs
    • Mega Menu Template
  • 📃Docs
    • Mega Menu Template
      • Getting Started
        • Importing Template
        • Add Your Logos
        • Navigation Items
        • Importing Mega Dropdown Template
        • Dropdowns
          • Menu Dropdowns
          • Mega Dropdowns
        • Mobile
      • How To's
        • Change Mega Dropdown Container Width
        • How to Change Back Button Text
        • Add Scrollbar On Mobile Menu
        • Adding Custom CSS
        • Change Dropdown Activation Toggle
        • How to Query Loop Over Menu Dropdown
Powered by GitBook
On this page
  • Menu Dropdown Container Styling
  • Menu Dropdown Link Styling
  • Adding Multi-Level Dropdowns
  • Creating Dropdowns from the Wordpress Menu System
  1. Docs
  2. Mega Menu Template
  3. Getting Started
  4. Dropdowns

Menu Dropdowns

PreviousDropdownsNextMega Dropdowns

Last updated 1 month ago

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 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. 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:

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

Drag the duplicate dropdown inside of another menu dropdown. The structure should look like this Menu Dropdown > Content > Menu Dropdown + Nav Link(s)

📃
here