左侧带有徽标的导航栏

卡奥罗查

我如何将此徽标插入导航栏？

请帮帮我，我需要在左侧导航栏中放置徽标

我为帖子添加了更多细节 aaaaaaaaaaaaaaaaa

按照链接查看代码

    @import url('https://fonts.googleapis.com/css?family=Viga&display=swap');

*{
  margin: 0;
  padding: 0;
}

/*Config da navbar*/
.navbar ul{
  display: flex;
  justify-content: flex-end;
  background-color: #333;
  padding: 25px;
}

/*Config dos tópicos da navbar*/
.navbar li{
  list-style: none;
  position: relative;
  padding: 0px 15px;
  box-sizing: border-box;
}

.navbar li:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: -10px;
  left: 0;
  background-color: #f5b240;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.navbar li:hover:before{
  visibility: visible;
  transform: scaleX(0.5);
}

/*Config dos textos da navbar*/
.navbar a{
  text-decoration: none;
  font-family: 'Viga', sans-serif;
  padding: 0 20px;
  color: white;
}

菲利克斯·凯勒

您可以在 ul 元素中包含您的徽标并将其设置在左侧margin-right: auto：

@import url('https://fonts.googleapis.com/css?family=Viga&display=swap');

*{
  margin: 0;
  padding: 0;
}

/*Config da navbar*/
.navbar ul{
  display: flex;
  justify-content: flex-end;
  background-color: #333;
  padding: 25px;
}

/*Config dos tópicos da navbar*/
.navbar li{
  list-style: none;
  position: relative;
  padding: 0px 15px;
  box-sizing: border-box;
}

.navbar li:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: -10px;
  left: 0;
  background-color: #f5b240;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.navbar li:hover:before{
  visibility: visible;
  transform: scaleX(0.5);
}

/*Config dos textos da navbar*/
.navbar a{
  text-decoration: none;
  font-family: 'Viga', sans-serif;
  padding: 0 20px;
  color: white;
}

.navbar-logo{
  margin-right: auto;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>NAVBAR CAIO</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="navbar">
      <ul>
        <img class="navbar-logo" src="https://spartanpower.com/wp-content/uploads/2018/07/Spartan-Power-Logo-512-50x50.png">
        <li><a href="#">Home</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </div>

  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。