Я уже просмотрел ваш сайт и код. Ваш код вызывает проблемы, поэтому лучше рассмотреть два разных "div" для логотипа и области меню. Сделав это, вы можете соответствующим образом отредактировать область меню и затем создать 2 "ul".
Вы можете посетить мой блог, чтобы получить ответ: Online IN World . Вот код, который я бы предложил для разделения вещей на два dvis
<div class=”container logo_sec”>
<!– Logo Area or Header Area which includes logo and top bar with contact info –>
LOGO Section
</div>
<div class=”container-fluid”>
<div class=”row”>
<ul class=”main_header_1″>
<li><a href=”#”> Menu 1 </a></li>
<li><a href=”#”> Menu 2 </a></li>
<li><a href=”#”> Menu 3 </a></li>
<li><a href=”#”> Menu 4 </a></li>
<li><a href=”#”> Menu 5 </a></li>
</ul>
</div>
<div class=”row”>
<ul class=”main_header_2″>
<li><a href=”#”> Menu 1 </a></li>
<li><a href=”#”> Menu 2 </a></li>
<li><a href=”#”> Menu 3 </a></li>
</ul>
</div>
</div>
А вот и CSS
/* CSS goes here */
body
{
margin: 0;
}
.logo_sec
{
text-align: center;
font-size: 40px;
}
.main_header_1
{
background-color: #ffffff;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.main_header_1 li,
.main_header_2 li
{
display: inline-block;
padding: 15px;
}
.main_header_1 li a
{
color: #333333;
}
.main_header_1 li a,
.main_header_2 li a
{
text-decoration: none;
font-size: 18px;
}
.main_header_2
{
background-color: darkblue;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.main_header_2 li a
{
color: #ffffff;
}
Таким образом, вы получите такой вывод, как я уже упоминал, код для разделения меню на 2 строки.
Проверьте это изображение для вывода
Спасибо.