引導程序標題 - 更改徽標的位置/大小

Question

我開始製作自己的第一個網站，並使用引導程序中的標題/導航欄。 現在我有兩個問題：

1. 我不知道如何改變我的標誌的大小，它應該有像頭一樣大小，如果我添加了一個小的標誌（在頭的大小），我不知道如何使它在標題中間（它應該在標題的頂部和底部之間具有相同的距離）。
2. 如果標題包含多個鏈接或一個長網站名稱，它有兩行。我應該改變什麼內容是在同一行？

有圖片使其更容易理解：

What it looks like (Imgur)

What it should look like (Imgur) 很抱歉，如果我的英語是不是最好的:) 我的代碼：

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

 
} 
 

 
/* navigation */ 
 
nav.navbar-custom { 
 
\t background: #999999; /*000000*/ 
 
\t border: 0; 
 
\t border-radius: 0; 
 
\t font-family: Raleway; 
 
\t margin: 0; 
 
\t text-transform: uppercase; 
 
} 
 
nav.navbar-custom div.navbar-header a.navbar-brand, 
 
nav.navbar-custom div.navbar-header a.navbar-brand:link { 
 
\t color: #222; /*ffffff*/ 
 
\t font-family: Poiret One; 
 
\t font-size: 22px; 
 
    font-weight: 700; 
 
\t letter-spacing: 3px; 
 
} 
 
nav.navbar-custom ul.navbar-nav li a, 
 
nav.navbar-custom ul.navbar-nav li a:link { 
 
\t color: #222; /*ffffff*/ 
 
\t font-size: 17px; 
 
\t letter-spacing: 3px; 
 
\t 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 { 
 
\t background: none; 
 
\t color: #00FF00; 
 
\t 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> 
 
\t \t \t \t \t \t \t <li><a href="">Link 1 2 3 4 5</a></li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </nav> 
 
     </header>

Answer 1

您可以使用背景圖片標籤輕鬆聲明徽標的大小，並且您的菜單有很多選項：

*更改字體大小。 *爲某些鏈接使用下拉列表。 *隨着視口更改更改網站字體的大小。

我還爲移動導航添加了缺少的HTML。

/* 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>