嘗試調整我的徽標大小並在徽標的側面添加標題而不調整導航欄的大小

Question

我正在嘗試調整徽標的大小並在徽標的一側添加標題而不調整導航欄的大小。 當前導航欄的樣子

HTML：

<header id="header">
<img src="logohtml.png" alt="logo" id="header-img">
  <nav id="nav-bar">
    <ul> 
           <li><a class="nav-link" href="#"><b>Things to Do</b></a></li>
           <li><a class="nav-link" href="#"><b>Where to Eat</b></a></li>
           <li><a class="nav-link" href="#"><b>Events</b></a></li>
           <li><a class="nav-link" href="#"><b>Hotels</b></a></li> 
       <li><a class="nav-link" href="#"><b>Parking</b></a></li> 
    </ul>  
  </nav>

CSS：

header {
    position: fixed;
    background-color: #FFAA63;
    color: white;
    font-family: 'Exo 2', sans-serif;
    padding: 1em;
    width: 100%
}

header::after {
    clear: both;
    content: '';
    display: table;
}

#header-img {
    width: 90px;
    height: 50px;
    float: left;
    padding-top: 1.7em;
}

編輯：

這是應用代碼后的導航欄。 由於某種原因，徽標仍然是相同的大小。 我希望它更大但不改變導航欄的高度。

在此處輸入圖片說明

編輯：我按照建議做了，我的標志適合導航欄，謝謝！ 我添加了寬度並調整了高度和寬度。

#header-img {
  position: absolute;
  height: 160px;
  width: 250px;
}

當前導航欄

Answer 1

我不太明白您的問題，但我認為您需要將徽標向右移動一點，而不會影響導航欄的大小。 或者，您可能想調整徽標的大小但不影響導航欄。 所以這個解決方案適用於這兩個問題。

#nav-bar {
left: 58%;
position: absolute;
margin-top: 30px; }

Answer 2

基於我對您提供的代碼缺少什么的假設。 我按照以下代碼片段構建了您的導航欄，希望它能以某種方式幫助您。

基本上，我的解決方案使用flexbox應用於標題的flexbox ，以便讓標題的元素按行顯示。 然后使用align-items: center垂直對齊和justify-content: space-between between 在 logo 和 navabr justify-content: space-between創建一個空間。

編輯：參考此鏈接玩轉： https ://codepen.io/DohaHelmy/pen/xxbzzRN

我嘗試重新定位徽標並在其旁邊添加了一個名稱。 還可以考慮刪除添加到標題的margin-top ，因為它只是設置為正確顯示效果。

為了更好地顯示結果，請使用整頁運行代碼段

 header { margin-top: 50px; display: flex; align-items: center; justify-content: space-between; position: fixed; background-color: #ffaa63; color: white; font-family: "Exo 2", sans-serif; padding: 1em; width: 100%; } #logo{ display: flex; align-items: center; font-size: 35px; position: relative; } #logo span{ position: relative; left: 220px; } #header-img { position: absolute; height: 120px; } #nav-bar ul { position: relative; right: 50px; list-style-type: none; overflow: auto; } #nav-bar ul li { float: left; margin: 0px 20px; color: #fff; } #nav-bar .nav-link { color: #000; text-decoration: none; }

 <header id="header"> <div id="logo"> <img src="https://www.freepnglogos.com/uploads/eagles-png-logo/eagle-sports-png-logos--0.png" alt="logo" id="header-img"> <span>Logo name</span> </div> <nav id="nav-bar"> <ul> <li><a class="nav-link" href="#"><b>Things to Do</b></a></li> <li><a class="nav-link" href="#"><b>Where to Eat</b></a></li> <li><a class="nav-link" href="#"><b>Events</b></a></li> <li><a class="nav-link" href="#"><b>Hotels</b></a></li> <li><a class="nav-link" href="#"><b>Parking</b></a></li> </ul> </nav> </header>