Different Navbars Based on Screen Size

Depending upon which theme you choose, or how many links you place in your navbar, your page may fall apart when viewed on a tablet or smartphone. One way to get around this is to use multiple navbars and have the proper one displayed depending upon which size screen the user is viewing with. On my iPhone a mobile-friendly page is automatically loaded by SmugMug. But on the iPad, when held vertically (portrait orientation) my menu bar, thumbnails, and photo (SmugMug Layout) don't fit. Using CSS and a 2nd content block I hide the left (vertical) navbar and show a header (horizontal) navbar. I have 2 navbars ... one is in the HEADER of the page (a horizontal one) and one is in the LEFT SIDEBAR of the page. They are both enabled in "ENTIRE SITE". My "left sidebar" has a LOGO, a MENU BLOCK, and SOCIAL ICONS. My "header navbar" has a LOGO and a MENU BLOCK. I then use CSS to determine the screen width and hide one of them:

  • When a wide enough screen views my site the left sidebar is displayed.
  • When an iPad in horizontal (landscape) orientation is used, the size is wide enough and the left sidebar is displayed.
  • When an iPad in vertical (portrait) orientation is used, the size is too small. The left sidebar is hidden and a navbar at the top of the screen is displayed. Here's the code:
    /* 
       = LARGE DISPLAYS   =
       For small screens and tablets in vertical orientation, 
       show a horizontal menubar in the header. 
       Hide the header for screens that are large enough */
    @media only screen and (min-width: 801px) {
      .sm-page-layout-region-header { display: none; }
    }
    
    /* 
       = iPads and Small Monitors  =
    @media only screen and (min-width: 641px) and (max-width: 800px) {
       /* Hide the left nav bar for screens that aren't large enough */
      .sm-page-layout-region-left { display: none; } 
    
       /* Move the center of the page to the left edge of the screen since the left
           navbar is no longer there */
      .sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
    } 
    
    /* 
       = Mobile Phones  =
    @media only screen and (max-width: 640px) {
      /* Hide the header from Mobile Phones */
      .sm-page-layout-region-header .sm-page-widget-logo,
      .sm-page-layout-region-top .sm-page-widget-nav { display: none !important; }
    }
    

Comments

  • Guest

    on October 27, 2016

    You need to add "*/" after the ipads and monitors and mobile phones descriptions = sign. Otherwise the section is commented out.
    On my website I have used your other mobile/tablet code to collapse the navbar but one thing I have been unable to figure out. On my entire site I have a small mini slideshow that appears on the left below my logo. I would like to hide this mini slideshow for small screen sizes as well. I don't know how to turn it off and I don't know what is it being called by smugmug in the code. On my homepage I also have a larger centered slideshow that I want to remain as is as it automatically scales by screen size.
    Can you provide any help for hiding my mini slideshow for small screens?
    http://www.margygreen.com/

  • Steven Gregory Photography

    on February 3, 2016

    Hi, My logo displays fine in the upper left on computers, but for mobile, I want it to display at the bottom. My home page is an image of a person and when viewing on mobile, the logo cuts right across his head: www.stevengregoryphotography.com Do you have any thoughts on how to do this or point me in another direction to find ways to format the logo this way? Thanks!

  • Colton Graub

    on January 12, 2016

    I've implemented the code above but seem to be running into an issue where both the header navigation bar and the left navigation bar appear when viewing on an iPhone 6 in landscape mode... any ideas as to what would cause this? Brilliant coding by the way (at least to a novice like me)!

  • Aaron @ SmugMug

    on January 30, 2015

    You should place it in a CSS content block on your "Entire Site" or in your theme's Advanced settings

  • Spero

    on January 30, 2015

    Where do I place this code??

Powered by SmugMug Owner Log In