导航菜单（响应）和cols无法在移动设备上正确查看

时间：2016-06-02 05:02:59

标签： android css mobile navigationbar responsive 

@media only screen and (max-width: 960px) {
  .flexslider {
    margin-top: 100px;
  }

  .main-header {
    padding: 15px 0;
  }
  .main-header .logo {
    margin-top: 20px;
  }

  .service-item, .team-member {
    margin-bottom: 50px;
  }

  .our-skills {
    margin-top: 60px;
  }

  .flex-caption {
    top: 20%;
  }
  .flex-caption h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .flex-caption p {
    font-size: 14px;
    width: 70%;
    margin: 0 auto;
  }

  .left-header, .right-header {
    text-align: center;
  }
}

我认为移动查看我的'main-header'和'body header'有问题。主题标题容器内的响应式菜单导航栏和主要公司徽标.png存在问题，未正确调整大小。这让我的'家''关于''vinnies'等导航部分进入我在平板电脑上查看的徽标。然后，当在移动设备上查看时，三线导航栏在移动设备上查看时显示在右侧。当我点击三行导航栏时，它不显示我的导航链接 - 不可点击。另外，我对St. Vincent de Paul的公司徽标（.png）似乎没有调整到移动媒体屏幕。然后身体标题链接到处都是。寻求帮助所以这在移动设备上看起来不错。网站是：www.svdpplymouth.org - 感谢您的帮助！

.top-header {
  background: #191970;
  color: white;
  padding: 10px 0;
  z-index: 1000
}
.top-header .left-header span {
  display: inline-block;
  margin: 8px 20px 0 0;
}
.top-header .left-header span i {
  margin-right: 10px;
}
.top-header .right-header ul.social-icons li {
  display: inline-block;
}
.top-header .right-header ul.social-icons li a {
  color: white;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  border: 2px solid white;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  margin: 0 8px;
}
.top-header .right-header ul.social-icons li a:hover {
  background-color: white;
  color: #191970;
}
.main-header {
  width: 100%;
  z-index: 9999;
  padding: 10px 0;
  background: white;
  -webkit-box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15);
  -moz-box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15);
  box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.main-header .logo {
  margin-top: 2px;
}
.main-header .logo h1 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.main-header .logo h1 a {
  color: #444444;
}
.main-header .menu {
  margin-top: 35px;
}
.main-header .menu ul li {
  display: inline-block;
  margin-left: 5px;
}
.main-header .menu ul li a {
  text-transform: uppercase;
  color: #777777;
  font-size: 15px;
  padding: 4px 10px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.main-header .menu ul li a.current {
  background: #191970;
  color: white;
}
.main-header-shrink {
  padding: 10px 0;
  top: 0;
}
#body-header {
  width: 100%;
  padding: 4px 0;
  background: #b7dd33;
}
#body-header .nav ul li {
  display: inline-block;
  margin-left: 0px;
}
#body-header .nav ul li a {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 12px;
  padding: 8px 8px;
}
#body-header .nav li a:hover {
  background-color: #191970;
  color: #ffffff;
}
.responsive-menu {
  position: relative;
  top: -20px;
}
.responsive-menu .toggle-menu {
  font-size: 24px;
  color: #191970;
}
.responsive-menu .menu {
  display: none;
  position: absolute;
  top: 52px;
  width: 100%;
  background-color: #191970;
}
.responsive-menu .menu ul li {
  display: block;
  text-align: left;
  border-bottom: 1px solid #d1601c;
  margin: 0;
}
.responsive-menu .menu ul li:last-child {
  border-bottom: 0;
}
.responsive-menu .menu ul li a {
  color: white;
  padding: 15px 20px;
  display: block;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.responsive-menu .menu ul li a.current {
  background-color: #444444;
}
<body>

  <div id="header">
    <div class="site-header">
      <div class="top-header">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-sm-6">
              <div class="left-header">
                <span><i class="fa fa-phone"></i>920-892-4913</span>
                <span><i class="fa fa-envelope"></i><a href="mailto:info@svdpplymouth.org">info@svdpplymouth.org</a></span>
                <span><i class="fa fa-clock-o"></i>M-F 9AM-7PM SAT 9AM-5PM</span>
              </div>
              <!-- /.left-header -->
            </div>
            <!-- /.col-md-6 -->
            <div class="col-md-6 col-sm-6">
              <div class="right-header text-right">
                <ul class="social-icons">
                  <li>
                    <a href="https://www.facebook.com/?q=#/svdpplymouth" class="fa fa-facebook"></a>
                  </li>
                  <li>
                    <a href="https://www.instagram.com/svdpply/" class="fa fa-instagram"></a>
                  </li>
                  <li>
                    <a href="https://www.pinterest.com/svdpplymouth/" class="fa fa-pinterest"></a>
                  </li>
                  <li>
                    <a href="https://twitter.com/svdp_ply" class="fa fa-twitter"></a>
                  </li>
                  <li>
                    <a href="https://www.youtube.com/my_videos?o=U" class="fa fa-youtube"></a>
                  </li>
                </ul>
              </div>
              <!-- /.left-header -->
            </div>
            <!-- /.col-md-6 -->
          </div>
          <!-- /.row -->
        </div>
        <!-- /.container -->
      </div>
      <!-- /.top-header -->
      <div class="main-header">
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-6">
              <div class="logo">
                <h1><img src="images/SVDPlogotitle.png"></h1>
              </div>
              <!-- /.logo -->
            </div>
            <!-- /.col-md-4 -->
            <div class="col-md-8 col-sm-8 col-xs-6">
              <div class="menu text-right hidden-sm hidden-xs">
                <ul>
                  <li><a href="http://www.svdpplymouth.org/index.html">Home</a>
                  </li>
                  <li><a href="http://www.svdpplymouth.org/about.html">About</a>
                  </li>
                  <li><a href="http://www.svdpplymouth.org/vinnies.html">Vinnies</a>
                  </li>
                  <li><a href="http://www.svdpplymouth.org/outreach.html">Outreach</a>
                  </li>
                  <li><a href="http://www.svdpplymouth.org/crossroads.html">CrossRoads</a>
                  </li>
                  <li><a href="http://www.svdpplymouth.org/contact.html">Contact</a>
                  </li>
                </ul>
              </div>
              <!-- /.menu -->
            </div>
            <!-- /.col-md-4 -->
          </div>
          <!-- /.col-md-8 -->
        </div>
        <!-- /.row -->
        <div class="responsive-menu text-right visible-xs visible-sm">
          <a href="#" class="toggle-menu fa fa-bars"></a>
          <div class="menu">
            <ul>
              <li><a href="http://www.svdpplymouth.org/index.html">Home</a>
              </li>
              <li><a href="http://www.svdpplymouth.org/about.html">About</a>
              </li>
              <li><a href="http://www.svdpplymouth.org/vinnies.html">Vinnies</a>
              </li>
              <li><a href="http://www.svdpplymouth.org/outreach.html">Outreach</a>
              </li>
              <li><a href="http://www.svdpplymouth.org/crossroads.html">CrossRoads</a>
              </li>
              <li><a href="http://www.svdpplymouth.org/contact.html">Contact</a>
              </li>
            </ul>
          </div>
          <!-- /.menu -->
        </div>
        <!-- /.responsive-menu -->
      </div>
      <!-- /.container -->
    </div>
    <!-- /.header -->
  </div>
  <!-- /.site-header -->
  </div>
  <!-- /#home -->

  <div id="body-header">
    <div class="container">
      <div class="row">
        <div class="col-md-7">
          <div class="nav left header">
            <ul>
              <li><a href="#history">History</a>
              </li>
              <li><a href="#svdpply">SVDP Plymouth</a>
                </li<li><a href="#volunteer">Volunteer</a>
              </li>
              <li><a href="#stew">Stewardship</a>
              </li>
              <li><a href="#vop">Voice of the Poor</a>
              </li>
              <li><a href="#resources">Resources</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-5">
          <div class="nav right-header text-right">
            <ul>
              <li class="fa fa-hand-o-right"><a href="http://www.svdpplymouth.org/about.html#volunteer" style="font-size:12px;">Volunteer</a>
              </li>
              <li class="fa fa-heart-o">
                <a style="font-size:12px;" href=" crossroads.html ">Donations</a></li>
							<li class="fa fa-check-square-o "><a href="http://www.svdpplymouth.org/outreach.html#outreachapps " style="font-size:12px; ">Applications-Forms</a></li>
						</ul>
					</div> 
				</div>
			</div>
		</div>	
	</div>	
</body>

1 个答案:

答案 0 :(得分：0)

在媒体查询中，只需为菜单添加一行

@media only screen and (max-width: 960px) {
.main-header .logo h1 img{width:100%;}
.responsive-menu .toggle-menu{font-size:40px;}
.responsive-menu .toggle-menu{top: -16px;right: 20px;position: relative;}
.responsive-menu .menu{z-index:99;top:0}
}
相关问题
最新问题