How to place an element in the navbar (on the left side) but i don't want it to get an animation?

Question

I want the Life's Good logo on the left side in the nav bar. If I put it in the class "btn" it also gets the animation and I can't place it on the left side. Can anybody help me please? Here's my Code with an example where I want the logo (marked in Yellow):

* {
padding:0;
margin: 0;
}

body {
  font-family: "Roboto";
  color: #fff;
  letter-spacing:1px;
}

a {
  text-decoration: none;
}

.nav-bar {
  padding-top: 18px;
  background: #ffffff;
  padding-bottom: 50px;
  position: relative;
  text-align: center;
  color: black;
}

#main {
  position: relative;
  margin-top: px;
  text-align: left;
}

.btn{
  display: inline-block;
  padding: 15px 40px;
  cursor: pointer;
  letter-spacing: 2px;
  position:relative;
  overflow:hidden;
  margin: 0 1px;
  outline: none;
}

.btn:before {
  content: "";
  position: absolute;
  width: 0;
  background : rgb(0, 0, 0);
  left: 45%;
  height: 2px;
  bottom: 0;
  transition: all .3s;
  opacity: 0.7;
}

.btn:hover:before {
  width: 100%;
  left:0;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Life's Good</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/stylesheet.css">
        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
        <link rel="icon" href="images/favicon.png">
    </head>
    <body>
        <div class="nav-bar">
                <div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
                <div class="btn"><a href="index.html" title="">Home</a></div>
                <div class="btn"><a href="#" title="">News</a></div>
                <div class="btn"><a href="#" title="">Gaming</a></div>
                <div class="btn"><a href="#" title="">Books</a></div>
                <div class="btn"><a href="#" title="">Coding</a></div>
                <div class="btn"><a href="#" title="">Contact</a></div>
        </div>
    </body>
</html>

Yellow Area is where i want the Logo ("Life's Good")

AdamRaichu · Accepted Answer · 2022-04-29T19:38:27.030

0

You are missing a number next to px in margin-top of #main. You may also want a margin-left value.

If you want to exclude the animation from that specific element, put the animation in a :not() CSS selector to deselect #main.

.btn:before:not(#main)

edited Apr 29 '22 at 19:38

answered Apr 29 '22 at 19:30

AdamRaichu

149
1
13

Khalid Fazal · Answer 2 · 2022-04-29T21:07:36.490

Set position: absolute for the #main element. Since .nav-bar's position is set to relative, #main will be absolutely positioned in relation to its parent, which is .nav-bar.

Now just set the margin of #main to suit your requirement. I've set it to margin: 15px 0 15px 75px (margin: top right bottom left) for reference.

* {
padding:0;
margin: 0;
}

body {
  font-family: "Roboto";
  color: #fff;
  letter-spacing:1px;
}

a {
  text-decoration: none;
}

.nav-bar {
  padding-top: 18px;
  background: #ffffff;
  padding-bottom: 50px;
  position: relative;
  text-align: center;
  color: black;
}

#main {
  position: absolute;
  margin: 15px 0 15px 75px;
  text-align: left;
}

.btn{
  display: inline-block;
  padding: 15px 40px;
  cursor: pointer;
  letter-spacing: 2px;
  position:relative;
  overflow:hidden;
  margin: 0 1px;
  outline: none;
}

.btn:before {
  content: "";
  position: absolute;
  width: 0;
  background : rgb(0, 0, 0);
  left: 45%;
  height: 2px;
  bottom: 0;
  transition: all .3s;
  opacity: 0.7;
}

.btn:hover:before {
  width: 100%;
  left:0;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Life's Good</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/stylesheet.css">
        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
        <link rel="icon" href="images/favicon.png">
    </head>
    <body>
        <div class="nav-bar">
                <div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
                <div class="btn"><a href="index.html" title="">Home</a></div>
                <div class="btn"><a href="#" title="">News</a></div>
                <div class="btn"><a href="#" title="">Gaming</a></div>
                <div class="btn"><a href="#" title="">Books</a></div>
                <div class="btn"><a href="#" title="">Coding</a></div>
                <div class="btn"><a href="#" title="">Contact</a></div>
        </div>
    </body>
</html>

How to place an element in the navbar (on the left side) but i don't want it to get an animation?

2 Answers2