Changing the smartmenus breakpoint for Backdrop CMS

The breakpoint for a Smartmens menu to go from displaying only the hamburger to displaying the whole menu is 768px by default. I had a site where I needed the breakpoint to fall at 1120px instead, here's how I changed it:

I started by copying two CSS files from backdrop core into my theme. The two files were named menu-dropdown.theme.css and menu-toggle.theme.css and are located in the core/modules/system/css/ directory.

I then opened both copies of these files in my editor, and changed every breakpoint that was 768px, to 1120px. The breakpoints are specified in ems, so that meant replacing

@media (min-width: 48em) {

with

@media (min-width: 70em) { 

I then added both these stylesheets into my theme's .info file, like so:

stylesheets[all][] = css/menu-dropdown.theme.css
stylesheets[all][] = css/menu-toggle.theme.css

And then I flushed all caches (especially the theme registry - to read the changes in the .info file - and the CSS/JS cache, to re-aggregate my style sheet changes.)

Now I have mobile-friendly menu that breaks at 1120px!