Mobile Menu

You would need to edit the stylesheet.

The breakpoint is at @media screen and (min-width: 1100px).

Actually the proper solution is scaling media queries utilizing elements to determine layout width instead of screen resolution. You need at least 2 steps before displaying a mobile menu. Mobile menu should only come on phones or mini tablets. I’ve done this on another website. Below is the solution I have found works well.

/* Tables and Phones - collapse sidebar, etc. */
@media all and (max-width: 68em) { ... }

/* Phones only - hide wide menu, display mobile menu, etc. */
@media all and (max-width: 45em) { ... }

Below are additional media queries if you want to get into more specific styling for very specific type of displays:

/* Desktops only */
@media all and (min-width: 68.01em) { ... }

/* Tablets and Desktops */
@media all and (min-width: 45.01em) { ... }

/* Tablets only */
@media all and (min-width: 45.01em) and (max-width: 68em) { ... }

Would there be an easy way to create a second navigation bar to kick in during mobile viewing?

My site’s navbar has several drop-down menus, so it’s a little overwhelming when you open the menu on mobile.

Andrew, if your mobile menu is overwhelming on a Mobile device then it means you have not designed your website with Mobile navigation in mind. I would suggest you redesign your website navigation if a large number of people are going to be viewing your site on mobile.

PS. It is pretty common these days to see a phone screen completely full (and more) by a mobile menu. If your traffic from mobile phones is expected to be low, I wouldn’t worry about it. You can use the above CSS I have provided and the mobile menu should only show on Phones and may be Mini-Tablets, but your full navigation bar will be seen on full size Tablets without the sidebars if you customize it that way like I have on another site.