CODEWITHSUNDEEP
htmlcss
Caio Rocha
Caio Rocha

Reputation: 13

Navbar with logo in left

https://codepen.io/f1rmeza/pen/BayxqWw

how i insert this logo into the navbar?

help me please i need to put logo in leftnavbar

im adding some more deitals for the post aaaaaaaaaaaaaaaaaa

follow the link to view the code

    @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;
}

Upvotes: 0

Views: 88

Answers (2)

Shirt
Shirt

Reputation: 11

@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{
    position: absolute;
    left: 0;
    top: 0;
}
<!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>

Upvotes: 1

Felix Keller
Felix Keller

Reputation: 36

You can include your logo inside the ul element and set it to the left with 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>

Upvotes: 1

Related Questions