Bootstrap 4 Collapsed navbar

Question

I am trying to rearrange my collapsed navbar I made with Bootstrap 4. It looks like this right now:

Is there a way to align the social media buttons on one line, bring the 'About' further down and get rid of the space in front of 'Projects' and 'Contact'?

That's my code so far:

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <a class="navbar-brand" href="#">Timo Springer</a>
    <ul class="nav navbar-nav m-x-auto" style="width: 300px;">
        <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#projects">Projects</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
        </li>
    </ul>
    <ul class="nav navbar-nav pull-md-right">
        <li class="nav-item">
            <a class="nav-link" href="https://www.facebook.com/timo.springer"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://www.instagram.com/springertimo/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://500px.com/timospringer"><i class="fa fa-500px" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://de.linkedin.com/in/timo-springer-372468129"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        </li>

    </ul>
</div>

Thanks a lot!

Timo

Answer 1

Just add clear:both in the nav tag in media css

@media (max-width:767px){
  .nav.m-x-auto{
    clear:both;
    margin: 0 !important;
  }
  .nav.navbar-nav.pull-md-right li{
    float:left;   
  }
   .nav.navbar-nav.pull-md-right li + li{
      margin-left: 1rem;
   }
}

Here is Demo

Answer 2

I think the following should work.

ul.nav.navbar-nav.m-x-auto {
float: none!important;
clear: both!important;
width: 100%!important;
}

ul.nav.navbar-nav.pull-md-right {
width: 100%!important;
clear: both!important;
float: none!important;
}

ul.nav.navbar-nav.pull-md-right > li {
width: 25%;
text-align: center;
display: inline-block!important;
}