Adding Custom CSS

Within the SCSS sheet there is an area designed to give you the boilerplate for your custom CSS. Here there are preset areas to help you target items in your DOM depending on the state of the menu.

1. Targeting the menu globally

2. Targeting the menu when its specifically not mobile

3. Targeting the menu when its at the breakpoint

4. Targeting the menu when its open on mobile

// Global Mega Menu Styling
.mm {

    //nest items here

}

// Specifically Not Mobile Menu
.mm:not(.brx-open) {

    //nest items here

}

// Mega Menu Styling Only At Breakpoint
@media (max-width: $navigation-breakpoint) {

    .mm {

        //nest items here

    }

}

// Mega Menu Styling On Mobile Menu
.mm.brx-open {

    //nest items here

}