基礎菜單溢出移動

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

您正在使用menu類ul已預定義的屬性

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

因此，在你的CSS，寫：

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

或者更改菜單類。

希望它有幫助！