title: Bootstrap Navbar how to get it so it can slide horizontally across the top from offscreen
body: <p>OK, here we go. I have a website texasranchesandlandcompany.com that mimics desktop icons as a navbar. which works fine on the desktop, but when the screen goes to mobile sizes I need to be able to slide those desktop looking icons across the screen horizontally. Without the rest of the website moving with it.</p>
  
  <p>I am not the best coder obviously but this problem has been the bane of my existence for the last 48 hours now.</p>
  
  <p>im not to sure why the snippet looks so ugly, but as you can see im new to coding and I cannot for the life of me get the icons to slide horizontally from offscreen</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fullnavbox {
    width: 100%;
    position: absolute;
    bottom: 0px;
  }
  @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
   [am-LatoSans] {
    font-family: 'Lato', sans-serif;
  }
  [am-TopLogo] {
    max-height: 119px;
    max-width: 210px;
    margin: 12px 11px;
  }
  [am-CallNow] {
    font-weight: 200;
    color: white;
    vertical-align: middle;
    line-height: 25px;
    font-size: 19px;
  }
  /*
    Relevant styles below
  */
  
  .topper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .expbar h2 {
    background-image: linear-gradient(#9f9f9f, #535353 3%, #1f1f1f 17%, #212121 49%, #191919 89%, #000000 100%);
    border-top: 1px inset rgba(255, 255, 255, 0.1);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .navbar {
    margin-bottom: 0;
  }
  .navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
  }
  .navbar .nav &gt; li {
    display: table-cell;
    float: none;
    text-align: center;
    vertical-align: middle;
  }
  .icons {
    border: 2px solid black;
    border-radius: 5px;
  }
  .navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
  }
  .navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
  }
  .navbar .navbar-nav&gt;li&gt;a {
    color: #d1d1d1;
    font-weight: 700;
    text-rendering: optimizeLegibility;
    /*text-shadow: 0px -1px black, 0px 1px rgba(255, 255, 255, 0.25);*/
    line-height: 18px;
    font-size: 1.3em;
  }
  .nav&gt;li&gt;a:hover {
    text-rendering: optimizeLegibility;
    background-color: rgba(10, 91, 196, 0.45);
    border: 2px solid rgba(10, 91, 196, 0.45);
    border-radius: 8px;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    font-size: 1.6em;
  }
  .navbar .navbar-nav &gt; li.active {
    color: #f8f8f8;
  }
  .nav&gt;li&gt;a&gt;img {
    max-width: 200px;
    margin: 0 auto;
    margin-top: 5px;
  }
  .nav&gt;li&gt;a:hover,
  .nav&gt;li&gt;a:focus,
  .nav&gt;li&gt;a:active {
    font-size: 1.1em;
  }
  .navfoot {
    width: 100%;
    padding-left: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- NAVBAR --&gt;
  
  &lt;div class="container-fluid fullnavbox"&gt;
    &lt;!-- Topper w/ logo --&gt;
    &lt;!-- &lt;div class="row hidden-xs topper"&gt;
      &lt;div class="col-xs-7 col-sm-7"&gt;
        &lt;a href="home.html"&gt;&lt;img am-TopLogo alt="SECUREVIEW"  src="pics/logo.jpg" class="img-responsive"&gt;&lt;/a&gt;
        &lt;div class="americap"&gt;
        &lt;h3&gt;A Wholly owned Subsidiary of the &lt;a href="http://www.theamericapgroup.com"&gt;Americap Group&lt;/a&gt;&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-5 col-xs-offset-1 col-sm-5 col-sm-offset-0 text-right "&gt;
        &lt;p am-CallNow&gt;214-425-9327 CALL NOW&lt;br&gt;For Available Properties&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt; --&gt;
    &lt;div class="row hidden-xs"&gt;
      &lt;div class="col-sm-6 col-sm-offset-3 text-center expbar"&gt;
        &lt;h2&gt;EXPERIENCE ,  not just selling, but in Developement &amp;amp;  Restoration&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End Topper --&gt;
    &lt;!-- Navigation --&gt;
    &lt;div class="row"&gt;
      &lt;nav class="navbar" role="navigation"&gt;
        &lt;div class="container-fluid"&gt;
  
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;!-- &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt; --&gt;
          &lt;ul id="navbox" class="nav navbar-nav js-nav-add-active-class"&gt;
            &lt;li id="active"&gt;&lt;a href="index.html"&gt;Our Offices&lt;br&gt;For 24 years&lt;img class="img-responsive icons" src="pics/icons/daloffice.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="about.html"&gt;Our Prime Properties&lt;br&gt;Are The Best&lt;img class="img-responsive icons" src="pics/icons/hcroad.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="388acre.html"&gt;388 Acre&lt;br&gt;Developement&lt;img class="img-responsive icons" src="pics/icons/reserve.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="senior.html"&gt;Senior&lt;br&gt;Developement&lt;img class="img-responsive icons" src="pics/icons/palma.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="countryclub.html"&gt;Country Club&lt;br&gt;Developement&lt;img class="img-responsive icons" src="pics/icons/plant.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="countrydev.html"&gt;Country&lt;br&gt;Developement&lt;img class="img-responsive icons" src="pics/icons/county.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="countryacre.html"&gt;Country Acrerage&lt;br&gt;Developement&lt;img class="img-responsive icons" src="pics/icons/LasHa.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;!-- &lt;li&gt;&lt;a href="countryacre.html"&gt;Ranch&lt;br&gt;Developement&lt;img class="img-responsive icons" src="pics/icons/icon.jpg"&gt;&lt;/a&gt;&lt;/li&gt; --&gt;
  
            &lt;!-- &lt;li&gt;&lt;a href="lakestown.html"&gt;Lakeside Townhouses&lt;/a&gt;&lt;/li&gt; --&gt;
            &lt;!-- &lt;li&gt;&lt;a href="ranchdev.html"&gt;Ranch Developement&lt;/a&gt;&lt;/li&gt; --&gt;
            &lt;!-- &lt;li&gt;&lt;a href="about.html"&gt;About&lt;br&gt;Us&lt;img class="img-responsive" src="pics/reserve/1.jpg"&gt;&lt;/a&gt;&lt;/li&gt; --&gt;
            &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;br&gt;Us&lt;img class="img-responsive icons" src="pics/icons/quill.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
  
          &lt;/ul&gt;
  
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="row navfoot"&gt;
        &lt;div class="col-sm-1 hidden-xs"&gt;
          &lt;a href="home.html"&gt;
            &lt;img src="pics/logo.jpg" class="img-responsive"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-5"&gt;
          &lt;div class="americap"&gt;
            &lt;h3&gt;A Wholly owned Subsidiary of the &lt;a href="http://www.theamericapgroup.com"&gt;Americap Group&lt;/a&gt;&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>