title: Boostrap Menu Formating Problems Meteor Js
body: <p>Hello and good afternoon. I am currently building a social networking application with the Meteor Js Stack but I am having a few problems with my nav bar wrapping on mobile. I tried setting my drop down to pull-right and it does but it stills wraps when the drop down is clicked.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> html { -webkit-text-size-adjust: none; }
  
  .navbar-nav {
   margin:0;
   float:none;
      display:inline-block;
  }
  .navbar-nav&gt;li {
   float:none;
      display:inline-block;
  }
  .navbar-nav&gt;li&gt;a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .navbar-default{
      position: fixed;
      right: 0;
      left: 0;
      z-index: 1030;
      margin-bottom: 250px;
  }
  
  .row {
      margin-top:80px;
  }
  
  #submitPost {
      width: 500px;
  }
  
  
  
  @media screen and (max-width: 768px) {
  
      .row {
          margin-top: 135px;
      }
  
  
      #submitPost {
          width: 300px;
      }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;
            {{#linkTo route='root'}}
          &lt;span style="font-size:1.7em" class="glyphicon glyphicon-home" aria-hidden="true"&gt;&lt;/span&gt;
            {{/linkTo}}
          &lt;/li&gt;
          &lt;li&gt;
            {{#linkTo route='messages'}}
          &lt;span style="font-size:1.7em" class="glyphicon glyphicon-envelope" aria-hidden="true"&gt;&lt;/span&gt;
            {{/linkTo}}
          &lt;/li&gt;
           &lt;li&gt;
            {{#linkTo route='profile'}}
          &lt;span style="font-size:1.7em" class="glyphicon glyphicon-user" aria-hidden="true"&gt;&lt;/span&gt;
            {{/linkTo}}
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
                &lt;a style="font-size:1.7em" class="glyphicon glyphicon-edit" href="#" data-toggle="dropdown" id="navLogin"&gt;&lt;/a&gt;
                &lt;div id="submitPost" class="dropdown-menu" style="padding:17px;"&gt;
  
                &lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul style="font-size:1.7em" class="nav navbar-nav navbar-right"&gt;
         {{&gt; loginButtons}}
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-2"&gt;&lt;/div&gt;
        &lt;div class="col-lg-8"&gt;
          {{&gt; yield}}
        &lt;/div&gt;
        &lt;div class="col-lg-2"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/5glx9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5glx9.png" alt="screenshot_1"></a></p>
  
  <p>Additional Screenshots</p>
  
  <p><a href="https://drive.google.com/file/d/0B2yh3X9W-N9LWEM5VF9FYU9mMlE/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/0B2yh3X9W-N9LWEM5VF9FYU9mMlE/view?usp=sharing</a></p>