Using full site navigation menu for tablet with Big Brother Theme

• 

  hmaestro · Member · Mar 31, 2015 at 9:05 pm

  • Copy link
  • Add topic to favorites

  The navigation menu of the big brother theme is nice when using a desktop computer. However when moving to a tablet the menu is collapsed to a single button. While this is necessary for a phone screen, it does not appear necessary for the tablet. I would like to see if I can use CSS to do one of the following,

  1. Maintain the normal full site navigation menu with a tablet sized display.
  2. Force to always use full site for desktop and tablet display sizes (not just full navigation menu).
  3. Force to always use full site for all displays including phone.

  Thanks for your help.

• 

  thesacredpath · Member · Apr 1, 2015 at 3:05 pm

  • Copy link

  At 959px screens/windows, the menu switches to the touch menu to make it easier for people to select menu items since the normal main menu becomes difficult to use on touch devices. The sidebar also moves down below the content so the content is easier to read (being the more important thing on your site). Keeping the sidebar on smaller tablets, as you will see, is not optimal. The sidebar becomes so narrow that it is hard to read and hard to use.

  Test this out thoroughly on small tablets, and have some friends do the same and report back to you, if you can. If you happen to add more top level menu items, and the menu goes to 2 lines, then things get even more difficult for those on tablets with the following change. This uses a media query to keep the full site design down to 600px in screen/window width.

  @media screen and (min-width: 600px) {
  .primary {
      float: left;
      width: 70%;
  }
  .secondary {
      float: right;
      width: 30%;
  }
  .secondary .widget:first-of-type {
      background-clip: padding-box;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
  }
  .secondary .widget:last-of-type {
      background-clip: padding-box;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  .article-wrapper {
      text-align: right;
  }
  .hentry {
      margin: 0 auto;
      max-width: 700px;
      width: 100%;
  }
  .page-title {
      margin: 0 auto;
      max-width: 700px;
      width: 100%;
  }
  .comments-area {
      text-align: right;
  }
  .comments-wrapper, html #respond {
      margin: 0 auto;
      max-width: 700px;
      width: 100%;
  }
  .main-navigation > div > ul {
      position: inherit;
  }
  .main-navigation.toggled > div > ul {
      background: none repeat scroll 0 0 transparent;
      border-top: 0 none;
  }
  .menu-toggle {
      display: none;
  }
  .main-navigation ul {
      display: block;
  }
  .main-navigation ul ul {
      border: 1px solid #ecf1f4;
      display: none;
  }
  .main-navigation {
      background: none repeat scroll 0 0 #1b4b6d;
  }
  .main-navigation ul {
      text-align: center;
  }
  .main-navigation ul li a {
      border: 0 none;
      padding: 9px 15px;
  }
  .main-navigation ul li li a, .main-navigation ul li li li a {
      padding: 9px 15px;
      text-align: left;
  }
  .main-navigation li {
      display: inline-block;
      float: none;
  }
  .main-navigation li:hover {
      background: none repeat scroll 0 0 #ecf1f4;
  }
  .main-navigation li:hover a, .main-navigation li:hover a:visited {
      color: #3e749b;
  }
  .main-navigation li > ul {
      background: none repeat scroll 0 0 #ecf1f4;
  }
  .main-navigation li li:hover {
      background: none repeat scroll 0 0 white;
  }
  .main-navigation.has-header {
      background: none repeat scroll 0 0 rgba(27, 75, 109, 0.8);
      position: relative;
  }
  .site-footer .sep {
      clear: none;
      display: inline;
      height: auto;
      visibility: visible;
  }
  .site-info {
      float: left;
      line-height: 28px;
      max-width: 50%;
  }
  .social-links {
      float: right;
      margin: 0;
      text-align: right;
  }
  .social-links ul a {
      margin-left: 5px;
      margin-right: auto;
  }
  .social-links ul a::before {
      margin-top: 0;
  }
  }

• 

  hmaestro · Member · Apr 1, 2015 at 3:51 pm

  • Copy link

  Thank you very much for taking the time to code this. I feel the presentation now feels more open but good point on smaller tablets. It looks like my expectations may have been off for the normal menu functionality on a touch screen as tapping the main menu items does not drop down the sub menu items. Is this not possible?

  Thanks again,
  Brian

• 

  thesacredpath · Member · Apr 2, 2015 at 1:22 am

  • Copy link

  Brian, on the tap on the full menu items, it isn’t possible on all themes. Some of the newer themes have some different menu coding where when you tap on a menu item it opens and then if you want that top menu item you have to tap it again. It is always a delicate balancing act on menus to be able to have them work on all devices.

• 

  hmaestro · Member · Apr 2, 2015 at 1:38 am

  • Copy link

  I see. Thanks a lot for your help.

• 

  thesacredpath · Member · Apr 3, 2015 at 6:49 pm

  • Copy link

  You are welcome.