更改导航栏徽标填充答案

【问题标题】：Change navbar logo padding更改导航栏徽标填充
【发布时间】：2021-12-30 05:43:32
【问题描述】：

我正在尝试使用填充和黄色背景设置徽标样式（类似于vox.com 网站）。

vox 网站的导航栏徽标带有黄色背景和填充：

padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;

这使它创造了一个很酷的效果，标志似乎突出到身体部分。

我试图在raachotrekkers.com 网站上创建相同的效果，但没有成功。

Vox 网站使用的是 SVG 徽标，而我使用的是 PNG 图像。

是这个原因吗？

【问题讨论】：

你能分享显示你目前尝试完成的代码吗？
您在 raachotrekkers.com 中的徽标位于导航栏的顶部中心。那么你能详细说明你想要达到的目标吗？
我想把它移到左边，让它像 Vox 一样。
@MohitMaroliyaB17CS036 我在 custom-logo-link 类中添加了填充
@ækit 从主题设置中可以将徽标放在左侧，但我无法弄清楚这种风格。

标签： css navbar padding

【解决方案1】：

您可以通过使用position:absolute; 然后top:0; 来实现此目的

这里是代码

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
nav{
  padding:0 10%;
  display:flex;
  align-items:center;
  min-height:50px;
  max-height:80px;
  box-shadow:0 2px 10px 0 rgb(0 0 0 / 16%);
}
.brand{
  position:absolute;
  top:0;
}
.navlogo{
  width:180px;
}
.rightele{
  display:flex;
  justify-content:right;
  width:100%;
}

.rightele>*{
  align-items:center;
  display:flex;
  justify-content:center;
}
.rightele ul li{
/*   padding:5px 10px; */
   list-style-type: none;
}
.rightele ul li,
.rightele button{
    margin:5px 10px;
    cursor:pointer;
}
.rightele button{
  height:40px;
  padding:5px 10px;
  color:white;
  font-weight:800;
  background-color:#161616;
}

<nav>
  <div class="brand">
    <img class="navlogo" src="https://mlmgm6ui7ujb.i.optimole.com/Z_NXo3Y.9AP_~52a37/w:auto/h:auto/q:85/https://raachotrekkers.com/wp-content/uploads/2020/05/Raacho-Trekkers-Logo.gif">
  </div> 
  <div class="rightele">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Blog</li>
      <li>Road Trip</li>
    </ul>
    <button>TALK TO US</button>
  </div>
</nav>

我没有为移动视图添加 CSS，因为您可能想要一个汉堡图标并隐藏所有选项。

所以全屏打开

【讨论】：

【解决方案2】：

希望你能从这里得到一些参考：

codesandbox link

还加了代码

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/styles.css" />
  </head>

  <body>
    <img src="logo.png" alt="logo" />
  </body>
</html>

CSS

body {
  font-family: sans-serif;
  background: #dedede;
  padding: 48px;
}

img {
  width: 112px;
  height: 60px;
  background: yellow;
  padding: 12px 22px;
}

您可以从here下载logo的png文件

【讨论】：

谢谢，但它没有用。 Vox 网站有 .c-global-header__logo { 背景：#fff200; margin-bottom: -15px; } 我这个负责扩展logo效果。
@MohitMaroliyaB17CS036 如果他们已经说它不起作用，您不能要求某人接受您的答案。总是用if it helps 或if it answers 询问。