Dynamic Menu?

I’m trying to customize the menu a little bit: I need it to a) Stop collapsing on mobile – I want the horizontal, desktop version menu on mobile as well; and b) only display certain options, depending on which page the visitor is on (for example, if the visitor is on the “photography” page, I need the menu to only display the icon (i am using a plugin that allows me to have pictures in menus) for the “videography” site, and vice versa. I have sort of managed to achieve point a), but my code removes the menu completely on mobile, instead of keeping the desktop version. No idea how to go about getting b) done though.

This is the code i’ve used for that:

@media (max-width: 1000px) {
 .collapse {
   display: block !important;
 }

 button.toggle.nav-toggle.mobile-nav-toggle {
   display: none !important;
 }
}

Here’s a mockup I made in Photoshop of what I want:

View post on imgur.com

As I said, When a user clicks on the video icon, it should change to a photo icon.
Is this even possible?

Any suggestions appreciated!

The page I need help with: [log in to see the link]