body {
      background-color: #c0c0c0;
}

@media (min-width: 768px) {
      .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: fixed;
        float:none;
      }

      .navbar-nav > li {
        padding-left: 20px;
        padding-right: 20px;
      }

      .navbar {
        margin-top: 25px;
        border-radius: 5px;
        background-color: #99ccff;
      }

      .nav>li>a:hover, .nav>li>a:focus {
        background-color: #eee !important;
      }
}

.navbar {
      background-color: #99ccff;
}

<nav class = "navbar navbar-default navbar-static-top" role =  "navigation">
       <div class = "container-fluid">

        <div class = "navbar-header">
          <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target =  "#mainNavbarInfo">
            <span class = "sr-only"> Toggle navigation </span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
          </button>
          <a class = "navbar-brand" href = "#"> Product </a>
        </div>

        <!-- Begin Navbar items -->
        <div class = "collapse navbar-collapse" id = "mainNavbarInfo">
          <ul class = "nav navbar-nav">
            <li class = "active"><a href = "#"> Link </a> </li>
            <li><a href = "#"> Link </a> </li>
            <li><a href = "#"> Link </a> </li>
            <li><a href = "#"> Link </a> </li>
            <li><a href = "#"> Link </a> </li>
            <li><a href = "#"> Link </a> </li>
          </ul>
        </div>
     </div>
</nav>