Bootstrap header - change position/size of logo

Question

I started to make my own first website and I'am using a header/navbar from bootstrap. Now I have two questions:

1. I don't know how to change the size of my logo, it should have the same size like the header and if I add a small logo (in the size of the header), I don't know how to make it in the middle of the header (it should have the same distance between the top and the bottom of the header).
2. If the header contains to much links or a long website name, it has two rows. What should I change, that the content is in the same line?

There are pictures to make it more understandable:

What it looks like (Imgur)

What it should look like (Imgur) Sorry if my English isn't the best :) My code:

/* header */
header.nav-header {
	border-bottom: 1px solid #eee;
	width: 100%;
	z-index: 998;
    position: fixed;

}

/* navigation */
nav.navbar-custom {
	background: #999999; /*000000*/
	border: 0;
	border-radius: 0;
	font-family: Raleway;
	margin: 0;
	text-transform: uppercase;
}
nav.navbar-custom div.navbar-header a.navbar-brand,
nav.navbar-custom div.navbar-header a.navbar-brand:link {
	color: #222; /*ffffff*/
	font-family: Poiret One;
	font-size: 22px;
    font-weight: 700;
	letter-spacing: 3px;
}
nav.navbar-custom ul.navbar-nav li a,
nav.navbar-custom ul.navbar-nav li a:link {
	color: #222; /*ffffff*/
	font-size: 17px;
	letter-spacing: 3px;
	outline: 0;
}
nav.navbar-custom ul.navbar-nav li a:active,
nav.navbar-custom ul.navbar-nav li a:hover,
nav.navbar-custom ul.navbar-nav li a:focus {
	background: none;
	color: #00FF00;
	outline: 0;
}
nav.navbar-custom ul.navbar-nav li#current a:visited{
    color: #00FF00
}

  <!-- header -->
        <header class="nav-header">
            <nav class="navbar navbar-custom" role="navigation">
                <div class="container">
                    <div class="navbar-header">                        
                        <a class="navbar-brand" id="logo" href="index.html"></a>
                        <a class="navbar-brand" href="index.html">W E B S I T E 1 2 3 4 5 6. x y z</a>
                    </div>
                    <div class="collapse navbar-collapse" id="custom-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li id="current"><a href="index.html">Home</a></li>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                            <li><a href="">Link 4</a></li>
							<li><a href="">Link 1 2 3 4 5</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header> 

Answer 1

You can easily declare the size of your logo with a background image tag and there are many options as far as your menu goes:

*Change the font-size. *Use a dropdown list for some links. *change the size of the website lettering as the viewport changes.

I also added the missing HTML for the mobile navigation.

/* header */

header.nav-header {
  border-bottom: 1px solid #eee;
  width: 100%;
  z-index: 998;
  position: fixed;
}
/* navigation */

nav.navbar-custom {
  background: #999999;
  /*000000*/
  border: 0;
  border-radius: 0;
  font-family: Raleway;
  margin: 0;
  text-transform: uppercase;
}
nav.navbar-custom div.navbar-header a.navbar-brand,
nav.navbar-custom div.navbar-header a.navbar-brand:link {
  color: #222;
  /*ffffff*/
  font-family: Poiret One;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
}
.nav-header .navbar-brand#logo {
  background: url('https://static.acquitygroup.com/images/default-source/work/motorola-logo.png?sfvrsn=4');
  height: 50px;
  width: 50px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 10px;
}
nav.navbar-custom ul.navbar-nav li a,
nav.navbar-custom ul.navbar-nav li a:link {
  color: #222;
  /*ffffff*/
  font-size: 15px;
  letter-spacing: 3px;
  outline: 0;
}
nav.navbar-custom ul.navbar-nav li a:active,
nav.navbar-custom ul.navbar-nav li a:hover,
nav.navbar-custom ul.navbar-nav li a:focus {
  background: none;
  color: #00FF00;
  outline: 0;
}
nav.navbar-custom ul.navbar-nav li#current a:visited {
  color: #00FF00;
}
@media (max-width: 600px) {
  nav.navbar-custom div.navbar-header #brand {
    font-size: 15px;
    letter-spacing: 0;
  }
}
@media (max-width: 360px) {
  nav.navbar-custom div.navbar-header #brand {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header class="nav-header">
  <nav class="navbar navbar-default navbar-custom">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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" id="logo" href="index.html"></a>
        <a class="navbar-brand" id="brand" href="index.html">W E B S I T E 1 2 3 4 5 6. x y z</a>

      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li id="current"><a href="index.html">Home</a>

          </li>
          <li><a href="">Link</a>

          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Links <span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="">Link 2</a>

              </li>
              <li><a href="">Link 3</a>

              </li>
              <li><a href="">Link 4</a>

              </li>
              <li><a href="">Link 1 2 3 4 5</a>

              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</header>