尝试调整我的徽标大小并在徽标的侧面添加标题而不调整导航栏的大小

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>