Menu Button Control Based on Screen Size

I posted previously on my experiences customizing my web site.  There was one nagging element that I wanted to change and I now have completed
it!   I wanted to have minor menu choices, like About and Search available, but not distracting.  For me, that means not appearing as word buttons in the top menu, but rather sitting in an unobtrusive page bottom bar.  That bottom bar becomes obnoxious on small screens, so I wanted it to disappear and the choices appear in the drop down menu on those small, typically smart phone, displays.

Below is menu/title bar I am using on all of my pages on large screens.  I have the button choices cut down to my minimum.

The page footer holds a Search and About button, which will be occasionally useful, but not something the typical site visitor is likely to want to use.

When the screen gets narrow enough (defined as 670 pixels at this point), the top menu collapses into a menu button that can be clicked.  It will then show a dropdown list of menu choices, which for me appears as follows:

The thing to notice here is the presence of About and Search choices on the dropdown list when they are not in the full screen word menu bar.

That's pretty slick, and exactly what I wanted.  Making it happen took a relatively small amount of custom code.  Getting that right was a bit harder.

Help from SmugMug Support

Initially I was baffled by how to accomplish this, so I created a Digital Grin account and posted a support request which was answered, twice within 24 hours by Jenuine, a SmugMug employee.  You can see the discussion thread by visiting the Digital Grin Photography Forum.

Jenuine suggested a general approach and then posted a suggestion from one of the SmugMug customizers on how to accomplish my effect.  That's pretty amazing response, personal support, for no additional cost!  Have to love that.

Unfortunately, I was a bit baffled by how to use the code snippet, I didn't know where to put the snippet and wasn't sure it was exactly what I wanted.  So, I consulted my daughter, the holder of a fresh Computer Science degree (have I mentioned recently, that I am proud of her?).

Help from my Local Web Authority

We looked at the snippet and guessed that it might be added to my site wide HTML/CSS component and hoped that it would affect the Menu, which seemed a bit of a stretch, but it worked.  Yes!

I reached the appropriate block by:

1. Log In to my SmugMug account,
2. Click on Customize in top menu bar,
3. Select Content and Design menu choice, 
4. Select Entire Site for the scope of the change, 
5. Click the Wrench icon for my already existing HTML entry (or create a new one if it doesn't already exist).

When we pasted the snippet into my existing HTML/CSS block, it affected the menu, but not exactly as awe wanted.  After some fiddling, we hit upon code that did exactly what we wanted.  Here is what I added:

@media only screen and (min-width: 670px) {

 .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:nth-of-type(4) {display:none;}

}

  @media only screen and (min-width: 670px) {

 .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:nth-of-type(5) {display:none;}

}

It's relatively arcane, but it works to hide my 4th and 5th menu choice on wide screens.  I had already convinced the bottom menu bar to appear when the screen was side enough.  So that was all it needed.