# 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. ```scss // 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 ```javascript // Mobile Breakpoint const MENU_BREAKPOINT = 1100; ``` ## Mobile Hamburger Icon *** ### Size ```scss // MOBILE HAMBURGER ICON SIZE ****** $hamburger-icon-size: 2.6rem; // hamburger icon ``` ### Color ```scss // 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. ![](/files/ejzocODr3ramTrYpV988) ## Mobile Close Icon *** ### Size ```scss // MOBILE CLOSE ICON SIZE ****** $close-icon-size: 2.6rem; // close icon ``` ### Color ```scss // 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. ![](/files/S7Gi22UVHseNFJUcMDU4) ## Mobile Menu Open/Close Animation *** ### Slide Position ```scss // 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. ```scss // 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 ```scss // 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: ```scss $mm-pad-v: 2rem; // vertical spacing to be used throughout design ``` ### Horizontal Padding $mm-pad-h: ```scss $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. ```scss // 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. ```scss // 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 ```scss // 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" ```scss // 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) ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.nickarce.com/bricks-mega-menu/docs/bricks-mega-menu-template/getting-started/mobile.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.