好的，我们走了。我有一个网站texasranchesandlandcompany.com，模仿桌面图标作为导航栏。它可以在桌面上正常工作，但是当屏幕进入移动尺寸时，我需要能够在屏幕上水平滑动那些桌面图标。没有网站的其余部分随之移动。
我显然不是最好的编码员，但这个问题一直是我过去48小时内存在的祸根。
我不确定为什么该片段看起来如此丑陋，但是你可以看到我对编码很新，我不能为我的生活让图标从屏幕外水平滑动
.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 > 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>li>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>li>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 > li.active {
color: #f8f8f8;
}
.nav>li>a>img {
max-width: 200px;
margin: 0 auto;
margin-top: 5px;
}
.nav>li>a:hover,
.nav>li>a:focus,
.nav>li>a:active {
font-size: 1.1em;
}
.navfoot {
width: 100%;
padding-left: 10px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- NAVBAR -->
<div class="container-fluid fullnavbox">
<!-- Topper w/ logo -->
<!-- <div class="row hidden-xs topper">
<div class="col-xs-7 col-sm-7">
<a href="home.html"><img am-TopLogo alt="SECUREVIEW" src="pics/logo.jpg" class="img-responsive"></a>
<div class="americap">
<h3>A Wholly owned Subsidiary of the <a href="http://www.theamericapgroup.com">Americap Group</a></h3>
</div>
</div>
<div class="col-xs-5 col-xs-offset-1 col-sm-5 col-sm-offset-0 text-right ">
<p am-CallNow>214-425-9327 CALL NOW<br>For Available Properties</p>
</div>
</div> -->
<div class="row hidden-xs">
<div class="col-sm-6 col-sm-offset-3 text-center expbar">
<h2>EXPERIENCE , not just selling, but in Developement & Restoration</h2>
</div>
</div>
<!-- End Topper -->
<!-- Navigation -->
<div class="row">
<nav class="navbar" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- <div class="collapse navbar-collapse navbar-ex1-collapse"> -->
<ul id="navbox" class="nav navbar-nav js-nav-add-active-class">
<li id="active"><a href="index.html">Our Offices<br>For 24 years<img class="img-responsive icons" src="pics/icons/daloffice.jpg"></a>
</li>
<li><a href="about.html">Our Prime Properties<br>Are The Best<img class="img-responsive icons" src="pics/icons/hcroad.jpg"></a>
</li>
<li><a href="388acre.html">388 Acre<br>Developement<img class="img-responsive icons" src="pics/icons/reserve.jpg"></a>
</li>
<li><a href="senior.html">Senior<br>Developement<img class="img-responsive icons" src="pics/icons/palma.jpg"></a>
</li>
<li><a href="countryclub.html">Country Club<br>Developement<img class="img-responsive icons" src="pics/icons/plant.jpg"></a>
</li>
<li><a href="countrydev.html">Country<br>Developement<img class="img-responsive icons" src="pics/icons/county.jpg"></a>
</li>
<li><a href="countryacre.html">Country Acrerage<br>Developement<img class="img-responsive icons" src="pics/icons/LasHa.jpg"></a>
</li>
<!-- <li><a href="countryacre.html">Ranch<br>Developement<img class="img-responsive icons" src="pics/icons/icon.jpg"></a></li> -->
<!-- <li><a href="lakestown.html">Lakeside Townhouses</a></li> -->
<!-- <li><a href="ranchdev.html">Ranch Developement</a></li> -->
<!-- <li><a href="about.html">About<br>Us<img class="img-responsive" src="pics/reserve/1.jpg"></a></li> -->
<li><a href="contact.html">Contact<br>Us<img class="img-responsive icons" src="pics/icons/quill.jpg"></a>
</li>
</ul>
</div>
</nav>
<div class="row navfoot">
<div class="col-sm-1 hidden-xs">
<a href="home.html">
<img src="pics/logo.jpg" class="img-responsive">
</a>
</div>
<div class="col-sm-5">
<div class="americap">
<h3>A Wholly owned Subsidiary of the <a href="http://www.theamericapgroup.com">Americap Group</a></h3>
</div>
</div>
</div>
</div>
</div>