Optional Menu Item(s) Based on Screen Size

BarrettJG

I have a tiny page footer that holds my "About" and "Search" buttons on all of my site pages, unless the screen is "too" small (at the moment defined as 600 pixels tall, I believe). That's pretty close to the behavior I want. What is missing is having those same choices added to the Menu when it "collapses" from word buttons to just a single Menu bar, or when the footer is removed from display.

Any suggestions on how I could accomplish this?

My site is at: barrettphoto.us

Jenuine

Hello Barrett,
Since there are two separate menus they can't collapse into a single menu icon. To have the About and Search collapse as part of the main menu they would have to be added to that top navigation menu. Right now I can see that on the larger phones the second lower menu does show, but on the smaller displays the lower menu does disappear. Currently you have some css on your site that is hiding that lower nav bar for smaller screens, per the 600 pixels. If you are wanting to have code to make the lower navigation menu join the top when on mobile devices I am not sure that is even possible and if it is it would likely involve some fairly complicated code. If you simply want the bottom nav bar to display on all mobile devices then remove that bit of code that you are using.

If you want to have our customizers take a look and see if there is any additional code that would perhaps allow the addition of the two lower menu items to be added to the top nav bar, but then be removed on a mobile device then write to us at help@smugmug.com and ask for the customizers to take a look for you.

Jenuine

Hello Barrett,

I did have one of our customizers take a look and they were able to use some code to accomplish the idea of removing items from the main navigation menu on the mobile view,

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:nth-of-type(3) {display:none;}
@media only screen and (max-width: 670px) {
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:nth-of-type(3) {display:block;}

it will need to be tailored for your specific menu and you will need multiple liines of that to address mutliple menu buttons. Just use the desired nth-of-type(number of menu button goes here)

BarrettJG

That was the information I needed. I had to tweak it a bit, but the site is doing what I want it to do now. Thanks!

If anyone wants some details on what I did to make it work, I posted them on my BLOG at http://barrettphotova.blogspot.com/2017/03/menu-button-control-based-on-screen-size.html.

I hope it is ok to post a cross link like that, I'm doing it to avoid needing to post details of the implementation in multiple places.