Display Different Navbar Based on Screensize - Aaron Meyers

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; }


Powered by SmugMug Log In