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)
Last updated