title: Laravel how to make top menu display only in one row
body: <p>I develop under Laravel 5.4. There is a top menu show as in the picture 1. <a href="https://i.stack.imgur.com/Zd6c7.png" rel="nofollow noreferrer">top menu</a>
   However, I want to the menu show like picture 2 <a href="https://i.stack.imgur.com/zGOMh.png" rel="nofollow noreferrer">ideal top menu show</a>,show in any size screen only in one row. Is there any good solution to make it? Like by change the menu font auto? </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>.venus-menu {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    float: left;
    font-family: 'Open Sans', sans-serif;
    list-style: none;
    background: #fff;
    box-shadow: 0 1px 3px #dedede;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navbar-header"&gt;
    &lt;a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#" style="display: block;"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt; &lt;/a&gt;
    &lt;div class="content"&gt;
      &lt;ul class="venus-menu" id="top_bar"&gt;
        &lt;li&gt;&lt;a href="#" title="首页" target="_blank"&gt;首页&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title1" target="_blank"&gt;title1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title2" target="_blank"&gt;title2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title3" target="_blank"&gt;title3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title4" target="_blank"&gt;title4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title5" target="_blank"&gt;title5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title6" target="_blank"&gt;title6&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title7" target="_blank"&gt;title7&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title8" target="_blank"&gt;title8&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title9" target="_blank"&gt;title9&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" title="title10" target="_blank"&gt;title10&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>