Bootstrap 4 -- branding + navbar items

Question

Just so you know I'm completely new to Bootstrap as of today. I have previous experience with HTML/CSS so I decided to try learn something new and I jumped straight into the deep end with Bootstrap 4, skipping 3 (I'm aware 4 is still in alpha). Anyway I'm having a play around but cant seem to find an answer to my problem after search for ages.

Refer to this image

My navbar-brand logo is too large for the navbar and its throwing the menu items out of alignment. I would simply like to vertically align the items to the middle so they are centered with the logo.

<nav class="navbar navbar-light bg-faded navbar-full">
      <a class="navbar-brand" href="#"><img src="http://www.a1solarandelectrical.com.au/wp-content/uploads/2016/02/logoMedium.png" /></a>
      <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
      <div class="collapse navbar-toggleable-md" id="navbarResponsive">
          <ul class="nav navbar-nav">
              <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">About Us</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Solar Power</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">No Obligation Quote</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Contact Us</a>
              </li>
          </ul>
      </div>
  </nav>

This is my current code. I'm not using any custom CSS as of yet, so everything else is set to default. The logo size is 85px in height.

Cheers for the help :) ..

Answer 1

Adding the following css should do the trick

@media (min-width: 992px) {
    .navbar-nav li a { line-height: 80px; }
}

@media (max-width: 991px) {
    .navbar-brand { float: none; }
}

See http://www.bootply.com/dPkdVgNJZ5

Answer 2

Add the following code before </head>

<style>
.nav > li > a{
  margin-top: 20px; 
 }
</style>

Answer 3

You probably already solved the problem, but according to http://getbootstrap.com/docs/4.0/components/navbar/

"Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate."

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
    </a>
</nav>