Restrict mobile menu to display top-level pages only

Hi, Is there a way to only have the top-level pages of my "secondary navigation" display when viewing on mobile devices? My Site: http://new.stmichael.net/ You'll see I'm using the secondary navigation location more as a primary navigation. I have 7 top-level items (About Us, Admissions, Academics, Beyond Academics, etc) and about 24 second level pages. When viewing on a smaller screen I get the label "Menu" and when I click on that I see all 31 pages listed. It's very cumbersome. Instead, I'd only like to have the 7 top level pages listed. Any way to do that? Thanks so much!