title: Gumby align navigation with logo and toggle button
body: <p>I have been messing with my code for hours to try and figure out why the navigation isn't pushing down next to the logo, and also, when I try to view the website in a mobile screen size the toggle button is way far down the page when that also needs to be in line with the logo.</p>
  
  <p>I have attached two pictures to explain further.</p>
  
  <p><img src="https://i.stack.imgur.com/Qtv6f.png" alt="picture"></p>
  
  <p>Heres my code:</p>
  
  <p>Index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --&gt;
  &lt;!--[if lt IE 7]&gt; &lt;html class="no-js ie6 oldie" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;    &lt;html class="no-js ie7 oldie" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;    &lt;html class="no-js ie8 oldie" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 9]&gt;    &lt;html class="no-js ie9" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!-- Consider adding an manifest.appcache: h5bp.com/d/Offline --&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"&gt; &lt;!--&lt;![endif]--&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Short Bark &amp;amp; Sides Bexleyeath | Dog Grooming&lt;/title&gt;
      &lt;meta name="description" content="Welcome to Short Bark &amp; Sides, based in Bexleyheath we are one of the few to offer amazing prices and a 5 star service." /&gt;
      &lt;meta name="keywords" content="dog, grooming, bexleyheath, health, check, short, bark, and, sides, woof, bow, bone" /&gt;
  
          &lt;!-- Mobile viewport optimized: j.mp/bplateviewport --&gt;
          &lt;meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1"&gt;
  
      &lt;!-- Favicon --&gt;
      &lt;link rel="shortcut icon" href="favicon.ico" /&gt;
      &lt;link rel="icon" type="image/ico" href="favicon.ico" /&gt;
  
      &lt;!-- CSS --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css" media="screen"&gt;
      &lt;link rel="stylesheet" href="css/gumby.css" media="screen"&gt;
  
          &lt;script src="js/libs/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
      &lt;div class="mainsection"&gt;
          &lt;h1 class="four columns logo"&gt;
          &lt;a href="#"&gt;
              &lt;img class="left" src="images/logo.jpeg" alt="Logo" gumby-retina /&gt;
              &lt;/a&gt;
          &lt;/h1&gt;
  
      &lt;div class="navbar row" id="nav2"&gt;
          &lt;a class="toggle" gumby-trigger="#nav2 &gt; ul" href="#"&gt;&lt;i class="icon-menu"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class="eight columns"&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="apps.html"&gt;Our Apps&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="current.html"&gt;Live Projects&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
         &lt;/div&gt;
         &lt;/div&gt;
  
      &lt;footer&gt;
          &amp;copy; Short Bark &amp; Sides 2012-2013, Website Created by &lt;a href="http://danielsheen.co.uk"&gt;Daniel Sheen&lt;/a&gt;
      &lt;/footer&gt;
  
   &lt;!-- Grab Google CDN's jQuery, fall back to local if offline --&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;window.jQuery || document.write('&lt;script src="js/libs/jquery-1.9.1.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
  
    &lt;!--
    Include gumby.js followed by UI modules.
    Or concatenate and minify into a single file
    &lt;script src="js/libs/gumby.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/ui/gumby.retina.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/ui/gumby.fixed.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/ui/gumby.skiplink.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/ui/gumby.toggleswitch.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/ui/gumby.checkbox.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/ui/gumby.radiobtn.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/ui/gumby.tabs.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/ui/jquery.validation.js"&gt;&lt;/script&gt;
    &lt;script src="js/libs/gumby.init.js"&gt;&lt;/script&gt;
    --&gt;
    &lt;script src="js/libs/gumby.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/plugins.js"&gt;&lt;/script&gt;
    &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And the gumby.css (I've taken only the navigation code otherwise its way too long:</p>
  
  <pre><code>/*=====================================================
     Navigation (with dropdowns)
  ======================================================*/
     .navbar {
          width: 100%;
          display: inline;
          line-height: 150px;
      }
       @media only screen and (max-width: 767px) {
      .navbar {
          position: relative;
          border: none;
      }
      .navbar .column, .navbar .columns {
          min-height: 0;
      }
      }
      .navbar.fixed {
          top: 0;
          left: 0;
          z-index: 99999;
      }
      .navbar a.toggle {
          display: none;
      }
       @media only screen and (max-width: 767px) {
      .navbar a.toggle {
          top: 5%;
          right: 4%;
          width: 46px;
          position: absolute;
          text-align: center;
          display: inline-block;
          color: #65a3e6;
          background: #071e37;
          height: 40px;
          line-height: 38px;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          -ms-border-radius: 4px;
          -o-border-radius: 4px;
          border-radius: 4px;
          font-size: 30px;
          font-size: 1.875rem;
      }
      .navbar a.toggle:hover {
          background: #0a2a4e;
      }
      .navbar a.toggle:active, .navbar a.toggle.active {
          background: #041220;
      }
      }
      .navbar .logo {
          display: inline-block;
          margin: 0 2.12766% 0 0;
          padding: 0;
          height: 60px;
          line-height: 58px;
      }
      .navbar .logo a {
          display: block;
          padding: 0 0 0 16px;
          overflow: hidden;
          height: 60px;
          line-height: 58px;
      }
       @media only screen and (max-width: 767px) {
      .navbar .logo {
          float: left;
          display: inline;
      }
      .navbar .logo a {
          padding: 0;
      }
      .navbar .logo a img {
          width: auto;
          height: auto;
          max-width: 100%;
      }
      }
      .navbar ul {
          display: table;
          vertical-align: middle;
          margin: 0;
          float: none;
      }
       @media only screen and (max-width: 767px) {
      .navbar ul {
          position: absolute;
          display: block;
          width: 100% !important;
          height: 0;
          max-height: 0;
          top: 60px;
          left: 0;
          overflow: hidden;
          text-align: center;
          background: #041220;
      }
      .navbar ul.active {
          height: auto;
          max-height: 600px;
          z-index: 999999;
          -webkit-transition-duration: 0.5s;
          -moz-transition-duration: 0.5s;
          -o-transition-duration: 0.5s;
          transition-duration: 0.5s;
          -webkit-box-shadow: 0 2px 2px black;
          -moz-box-shadow: 0 2px 2px black;
          box-shadow: 0 2px 2px black;
      }
      }
      .navbar ul li {
          display: table-cell;
          text-align: center;
          padding-bottom: 0;
          margin: 0;
          height: 60px;
          line-height: 58px;
      }
       @media only screen and (max-width: 767px) {
      .navbar ul li {
          display: block;
          position: relative;
          min-height: 50px;
          max-height: 320px;
          height: auto;
          width: 100%;
          border-right: 0 !important;
          -webkit-box-shadow: none;
          box-shadow: none;
          -webkit-transition-duration: 0.5s;
          -moz-transition-duration: 0.5s;
          -o-transition-duration: 0.5s;
          transition-duration: 0.5s;
      }
      }
      .navbar ul li &gt; a {
          display: block;
          padding: 0 16px;
          white-space: nowrap;
          color: #65a3e6;
          text-shadow: 0 1px 2px black, 0 1px 0 black;
          height: 60px;
          line-height: 58px;
          font-size: 16px;
          font-size: 1rem;
      }
      .navbar ul li .btn {
          border-color: black !important;
      }
      .navbar ul li.field {
          margin-bottom: 0 !important;
          margin-right: 0;
      }
       @media only screen and (max-width: 767px) {
      .navbar ul li.field {
          padding: 0 20px;
      }
      }
      .navbar ul li.field input.search {
          background: black;
          border: none;
          color: #f2f2f2;
      }
      .navbar ul li:hover &gt; a {
          position: relative;
          background: #868d92;
          z-index: 1000;
      }
      .navbar ul li .dropdown {
          width: auto;
          min-width: 0px;
          max-width: 320px;
          height: 0;
          position: absolute;
          background: #fafafa;
          overflow: hidden;
          z-index: 999;
      }
      .navbar ul li:hover .dropdown {
          min-height: 50px;
          max-height: 561px;
          overflow: visible;
          height: auto;
          width: 100%;
          padding: 0;
          border-top: 1px solid #041220;
          -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
      }
       @media only screen and (max-width: 767px) {
      .navbar ul li .dropdown {
          width: 100%;
          max-width: 100%;
          position: relative;
          -webkit-box-shadow: none !important;
          -moz-box-shadow: none !important;
          box-shadow: none !important;
      }
      .navbar ul li:hover .dropdown {
          border-bottom: 1px solid #01050a;
      }
      .navbar ul li:hover .dropdown ul {
          position: relative;
          top: 0;
          background: #020a13;
          min-height: 50px;
          max-height: 250px;
          height: auto;
          overflow: scroll;
          -webkit-box-shadow: none !important;
          -moz-box-shadow: none !important;
          box-shadow: none !important;
          -webkit-transition-duration: 0.5s;
          -moz-transition-duration: 0.5s;
          -o-transition-duration: 0.5s;
          transition-duration: 0.5s;
      }
      .navbar ul li:hover .dropdown ul li {
          min-height: 50px;
          border-bottom: #041220;
      }
      .navbar ul li:hover .dropdown ul li a {
          color: white;
          border-bottom: 1px solid #01050a;
      }
      .navbar ul li:hover .dropdown ul li a:hover {
          color: #3794e6;
      }
      }
       @media only screen and (min-width: 768px) and (max-width: 939px) {
      .navbar &gt; ul &gt; li &gt; .btn a {
          padding: 0 10px 0 10px !important;
      }
      .navbar ul &gt; li .dropdown ul li:hover .dropdown {
          left: -320px;
      }
      }
  </code></pre>
  
  <p>If anyone can help that would be great.</p>