Laravel how to make top menu display only in one row - css

Question

I develop under Laravel 5.4. There is a top menu show as in the picture 1. top menu
However, I want to the menu show like picture 2 ideal top menu show,show in any size screen only in one row. Is there any good solution to make it? Like by change the menu font auto?
.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;
}
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#" style="display: block;"><i class="fa fa-bars"></i> </a>
<div class="content">
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>
</div>

Answer 1

Check working fiddle to get the same, but you have to change css part
NOTE - As you mansion that "top menu display only in one row"
Working fiddle
fiddle code
.navbar-minimalize {
margin:5px 50px 5px 15px;
display: inline-block;
}
.content {
width:100%;
display:flex;
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;
}
.content ul.venus-menu {
width:100%;
margin:0px;
padding:0px;
list-style:none;
border-left: 1px solid #ddd;
display:flex;
flex-flow:row nowrap;
justify-content:space-around;
}
.content ul.venus-menu li {
display:flex;
justify-content:space-around;
align-items:center;
flex-flow:row wrap;
}
.content ul.venus-menu li a {
display:block;
padding:10px 15px;
font-size:15px;
text-decoration:none;
color:#505050;
}
.content ul.venus-menu li a:hover {
background:#eee;
}
<div class="content">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>