导航栏容器可移动折叠全宽（容器流体）

Question

i have a container div where i have my logo, and at the right i have my menu, what i want to do is, when the navbar gets at screen size mobile i want each

to be on a row and each row is the size of a container-fluid, at the moment the issue is that each li size is the same of my container, how i can change this?

this is my code:

  <div id="navigation_bar"> <div class="content"> <div id="logo"> <a href="index.html"> <img class="logo_dark" src="images/virtuai/logo-dark.png" alt="Enar Logo"> <img class="logo_light" src="images/logo-light.png" alt="Enar Logo"> </a> </div> <nav id="main_nav navbar-right"> <div id="nav_menu"> <span class="mobile_menu_trigger"> <a href="#" class="nav_trigger"><span></span></a> </span> <ul id="navy" class="clearfix" style="float:right"> <li class="normal_menu mobile_menu_toggle current_page_item"> <a href="index.html"><span>HOME</span></a> </li> <li class="normal_menu mobile_menu_toggle current_page_item"> <a href="index.html"><span>ABOUT US</span></a> </li> <li class="normal_menu mobile_menu_toggle current_page_item"> <a href="index.html"><span>SOLUTIONS</span></a> </li> <li class="normal_menu mobile_menu_toggle current_page_item"> <a href="index.html"><span>CONTACT US</span></a> </li> </ul> </div> </nav> <!-- End Nav --> <div class="clear"></div> </div> 

Answer 1

Try this code.. overwrite the bootstrap container width

@media screen and (max-width: 768px) {
  body .container{
    width:100% !important;
  }
}