custom breakpoint for offcanvas hamburger icon

fallen29

i've noticed i can choose what predetermined screen size (SM, MD, LG, XL) will display the hamburger icon instead of the actual menu, i'm setting up my site at a custom max width and will probably have my own set of breakpoints, the only place i've seen where to define them is scss, namely _variables.scss, how do i set up my own breakpoints and remove or edit existing ones? and if i create and name a custom breakpoint, will i be able to pick it as an option for showing the icon or are these sizes (SM, MD, LG, XL) hardcoded in a JSON or PHP file?

fallen29

ok, quick update.... i've found the associated css media query responsible for the hamburger menu, if further assistance will be needed i will ask here, please don't close this topic yet, i will surely come back for a follow up question

[edit] i still don't know where the sizes list is located in the files when selecting a breakpoint for my offcanvas menu

saguaros

It's defined in this file: ROOT/templates/your_default_template/scss/_variables.scss

Look for this:

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

// scss-docs-start grid-breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1420px
);
// scss-docs-end grid-breakpoints

change to your desired value

Then go to template + compile.

fallen29

i know about this portion in _variables, i'm looking for the hardcoded version that's directly linked to the dropdown setting selection to set breakpoints in the navigation settings, so i can literally change let's say, 'SM' for example to 'customSM' and link it to a custom css or scss rule, that's my line of thinking, if it's unnecessary then fine

[edit] also, when do i remove local css? in the picture you've shown me

fallen29

please lock this topic, i'm dumb and stubborn, your solution worked

saguaros

Let me know if you need any further help 😉