title: Bootstrap 4 Navigation Divider
body: <p>I've been trying to combine two ul in one responsive navigation bar with a divider, without messing up with the seconds ul css.
  I've tried with mediaqueries but i haven't been able to make it work.
  To make it more clear, I need the first ul when it collapses to be centered, then have a divider and after that have the other ul centered beneath it.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-md navbar-dark"&gt;
      &lt;div class="container"&gt;
        &lt;a href="#" class="navbar-brand"&gt;&lt;img src="img/logo.png" alt="Akrotopi Apartments"&gt;&lt;/a&gt;
        &lt;button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#main-nav"&gt;
          &lt;span class="menu-icon-bar"&gt;&lt;/span&gt;
          &lt;span class="menu-icon-bar"&gt;&lt;/span&gt;
          &lt;span class="menu-icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div id="main-nav" class="collapse navbar-collapse"&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
            &lt;li&gt;&lt;a href="#" id="home" class="nav-item nav-link active"&gt;Αρχική&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="nav-item nav-link"&gt;Σχετικά&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="nav-item nav-link"&gt;Δωμάτια&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="nav-item nav-link"&gt;Επικοινωνία&lt;/a&gt;&lt;/li&gt;
            &lt;div class="dropdown-divider" &gt;&lt;/div&gt;
            &lt;div id="lang"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html" id="active"&gt;GR&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="lang.en.html"&gt;EN&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media screen and (max-width: 768px) {
        .navbar-brand {
          margin-left: 20px;
         }
  
        .navbar-nav {
          text-align: center;
          padding: 0 20px;
          background-color: #f8f9fa00;
         }
  
       .navbar.fixed-top .navbar-nav {
         background: transparent;
         }
         }
  
        #lang ul{
         position:absolute;
         top:15px;
         right:10px;
         list-style:none;
         padding:0;
         margin:0;
        }
        }
  </code></pre>
  
  <p>Any ideas on how to fix it?</p>
  
  <p>Thank you !!</p>