基础菜单溢出手机

Question

我正在重新设计一个网站，我使用了基础框架来帮助它响应。一切都很好，但是当菜单变成移动大小时，菜单会溢出页面的一侧。附件是 html 和 css，如有任何帮助，我们将不胜感激！

HTML

 <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>

            <!-- PUT LOGO HERE PLS -->
            <li class="menu-text site-title">
                <a href="index.html"> <img src="img/logosean.png" alt="teddy bear head"> Teddy Bear Wheelchair Foundation</a>
            </li>
        </ul>
        <!-- NOT DOWN HERE SILLY, UP THERE -->

    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li class="navPush"><a href="help.html">Who We Help</a></li>
            <li class="navPush"><a href="aboutus.html">About</a></li>
            <li class="navPush"><a href="contribute.html">Contribute</a></li>
            <li class="navPush"><a href="partners.html">Partners</a></li>
            <li class="navPush"><a href="contact.html">Contact</a></li>
        </ul>
    </div>
</div>

CSS

.top-bar,
.top-bar ul {
  background-color: #4c1a1b;
  font-family: "Lato", "Helvetica", sans-serif;
  font-weight: 400;
  color: #fcfae1;
}

.top-bar ul a {
  color: #fcfae1;
  list-style: none;
}

.navPush {
  padding-top: 10px;
}

.top-bar ul a:hover {
  color: #f6e497;
}

.site-title {
  color: #fff;
  font-weight: 900;
  padding: inherit;
}

Text Cutting Off

谢谢

Answer 1

您正在 ul 中使用 class menu，它具有预定义的属性

.menu > li {
  display: table-cell;
 }

因此，在您的 CSS 中写入：

.menu > li{
  display:inline-block;
}

否则更改菜单 class。

希望对您有所帮助！

基础菜单溢出手机

Foundation menu overflowing off of mobile

html

css

zurb-foundation