Mobile

Mobile Breakpoint

---

To change the breakpoint at which the menu changes to a hamburger icon follow the below steps

Step 1: change out the SCSS variable seen below that is inside of your scss sheet to your desired mobile breakpoint

In your scss sheet change our the breakpoint of the $navigation-breakpoint variable.

// WHEN WILL YOUR NAVIGATION CHANGE TO MOBILE? ******
$navigation-breakpoint: 1100px;

Step 2: Change out JS Variable

inside of the JS script that is imported into bricks along with your header template, change out the MENU_BREAKPOINT variable to the same you used in the SCSS sheet

// Mobile Breakpoint
    const MENU_BREAKPOINT = 1100;

Mobile Hamburger Icon

---

Size

// MOBILE HAMBURGER ICON SIZE ******
$hamburger-icon-size: 2.6rem; // hamburger icon

Color

// MOBILE HAMBURGER ICON COLOR ******
$hamburger-color: black;

Icon

Find the icon within the bricks panel and update it to the icon or SVG that you wish to use.

Mobile Close Icon

---

Size

// MOBILE CLOSE ICON SIZE ******
$close-icon-size: 2.6rem; // close icon

Color

// MOBILE CLOSE ICON COLOR ******
$close-icon-color: black;

Icon

Find the icon within the bricks panel and update it to the icon or SVG that you wish to use.

Mobile Menu Open/Close Animation

---

Slide Position

// WHERE DO YOU WANT THE MOBILE MENU TO SLIDE OPEN FROM? ******
$mobile-menu-slide-start-point: right; // SELECTION (left/right/top/bottom)

Transition

There are two variables to update the transition of the mobile menu sliding into view. Due to some bricks styling it is recommended to not change the transition time. If you do the slide in effect timing will work but the slide out when closing the menu may feel off. This is due to the way bricks handles the closing of the menu.

// HOW LONG SHOULD THE SLIDE TAKE? (note: for best close animation smoothness choose 0.2s)******
$mobile-menu-slide-transition-time: 0.2s;

// WHAT TRANSITION EFFECT DO YOU WANT? ******
$mobile-menu-slide-transition-effect: cubic-bezier(0.79,0.14,0.15,0.86);

Mobile Background Color

---

The mobile background color is handled by the below variable

// MOBILE MENU BACKGROUND COLOR ******
$mobile-background-color: white;

Mobile Padding (dynamic)

---

The padding on the mobile menu is all dynamic and items within the menu's will inherit and calculate automatically based on two values:

Vertical Padding $mm-pad-v:

$mm-pad-v: 2rem; // vertical spacing to be used throughout design

Horizontal Padding $mm-pad-h:

$mm-pad-h: 2rem; // horizontal spacing to be used throughout design

Mobile Link Styling

---

General styling

The links on mobile and desktop are handled seperatly. To change the styling of the links within the menu and submenus you can alter the styling by nesting your properties within the @mixin mobile-link-style.

// MOBILE MENU NAV LINK STYLE ******
@mixin mobile-link-style {
    color: black;

    //hover style
    &:hover {
        background-color: black;
        color: white;
    }

    //active page style
    &[aria-current="page"], &.aria-current {
        
    }
}

Link Dividers

By default all of the navigation items will have dividing borders to help separate them from each other. You can update the variable $mm-border to your desired value or simple put in "none" if you do not want a border.

// SET MOBILE LINK BOTTOM BORDER CSS. USE 'none' IF YOU DONT WANT BORDERS https://nickarce.com/mobile-menu-border/ ******
$mm-border: 1px solid var(--shade-light); // border value or none

Last Nav Item As a Button

---

On/Off

You can turn on and off the last item in your navigation to look like a button on mobile. This will inherit the styling from the @mixin last-link-btn-style

// DO YOU WANT THE LAST NAV ITEM TO LOOK LIKE A BUTTON ON MOBILE? https://nickarce.com/mobile-button/ **********
$last-nav-button-mobile: true; // SELECTION (true/false) *********

Push Last Link To Bottom Of Screen

By Default, if you have your last item set to a button it will push it to the bottom of the screen for easier usability for mobile users. If you wish to turn this off you can change the value of $last-nav-button-mobile-bottom to "false"

// IF USING BUTTON ON MOBILE: DO YOU WANT IT AT THE BOTTOM OF THE SCREEN https://nickarce.com/mobile-button-bottom/ **********
$last-nav-button-mobile-bottom: true; // SELECTION (true/false)