Updates to the Menu Content Block & Mobile Site View

leftquark

This morning we released a few changes to the Menu Content block that I think most of you will enjoy. Here's a breakdown:

1) We have expanded the ability to emphasize the active page. You may now emphasize the parent of the active page using a new CSS class. For menus with sub-levels, the higher level will now have the css class:
[HTML]
sm-page-widget-nav-hasactivepage
[/HTML]

This will allow you to emphasize both the parent and sibling item as active (Ex: Nature -> Landscapes, can now emphasize both "Nature" AND "Landscapes" when browsing the landscapes gallery. Previously you could only highlight "Landscapes"). This can be used in conjuncture with the "sm-page-widget-nav-activepage" class.

2) iPhone6 in landscape orientation is now considered mobile and will load the collapsed mobile version of your site, with the menu brought into the "MENU" accordion. Previously it would load the desktop site. Previously the max width for mobile sites was considered 640px. We have changed this to 670px. This will also affect other devices besides the iPhone6 that have screen widths slightly larger than 640 pixels.

3) A few bug fixes:
a) Menu's on mobile will now display text in all capitals, if the user selected that option.
b) Fixed an issue that was allowing blank Custom URL's to generate wrong links. Blank URL's will now generate no link.
c) Fixed an issue where clicking on a top-menu item could prevent the sub-menu links from working.
d) The Active page is now properly emphasized on mobile.
e) Search boxes will now properly work as child items.

Emphasizing the Parent Link:
To emphasize the parent link in the navbar, you can use CSS code similar to this. You may read more here: http://www.aaronmphotography.com/Customizations/Navbar/Emphasize-Active-Page

/* Make the Customizations link in the navbar always white */
.sm-page-widget-nav-hasactivepage > a {
   color: #E3E3E3 !important;
}

/* Make the Customizations link in the navbar always have a white hover color */
.sm-page-widget-nav-hasactivepage  > a:hover {
  color: #FFFFFF !important;
}

MiguelCz

increase max width for mobile sites?
Hi!
When viewing website on an iPad in portrait/vertical view, my menu kind of crumbles (it's too long and breaks in two lines).
Therefore I'd like to increase the max width by myself, from the 670px you mentioned to something around 925px.
Is this possible thru CSS? Can I overwrite the max width for mobile sites set up by Smugmug?
Many thanks in advance!
Miguel
www.miguel.cz

leftquark

You can use CSS to change things based on screen widths. I have some discussion on that here: http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

ptrbee

Hi,

Based on analytics, most visitors to most websites now do so on mobile phones. I've been getting more & more complaints from my clients whenever I send them out event registration invitations where they do not know what to do because the registration page is formatted with some of the text off the screen. Now with this change above implemented even more so. I've managed a workaround by turning my iPhone 6/6 Plus in landscape mode & selecting request desktop site. Our clients shouldn't have to do this though & in most cases it could mean us wasting a lot of time explain to them how to. Same goes for the ability to select favourites from a mobile. Surely this should be standard? I haven't posted here in awhile & forgot where to find feature request so if this is in the wrong place, sorry.

Peter.

leftquark

ptrbee wrote: »

Hi,

Based on analytics, most visitors to most websites now do so on mobile phones. I've been getting more & more complaints from my clients whenever I send them out event registration invitations where they do not know what to do because the registration page is formatted with some of the text off the screen. Now with this change above implemented even more so. I've managed a workaround by turning my iPhone 6/6 Plus in landscape mode & selecting request desktop site. Our clients shouldn't have to do this though & in most cases it could mean us wasting a lot of time explain to them how to. Same goes for the ability to select favourites from a mobile. Surely this should be standard? I haven't posted here in awhile & forgot where to find feature request so if this is in the wrong place, sorry.

Peter.

Hi Peter,
The events and event favoriting pages definitely do need some love. It's on our list of things to work on but at this time we're focusing on some other items that we think you'll love. While I can't provide any timeframe on when Events will get updated I do want to let you know that it's something that's been on our minds.

MiguelCz

leftquark wrote: »

You can use CSS to change things based on screen widths. I have some discussion on that here: http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

Aaron I know your costumizations site inside out and let me take the opportunity to thank you for such a great job, it really helps many of us!

However the examples you show there (hide the search form and social media links for mobile browsers, hide the left nav bar for screens that aren't large enough, and for screens large enough add the word "Download" after the download button) are pretty specific IMHO.

I think the code for forcing collapsible menu if screen smaller than XXX pixels is a more generic feature that more people could benefit from. Again IMHO.
I wish I could come up with the code by myself but my knowledge of Smugmug tags needed to play with CSS (".sm-page-layout-region" and such) is not enough unfortunately.

Best regards!