CODEWITHSUNDEEP
htmlcssnavbartransition
Alongi
Alongi

Reputation: 23

Right part of the Navbar doesn't show transitions

first of all I want to tell you that I'm new about coding and I need some help for my homework. I've made a navbar with central logo. The problem is, when I create some transitions for my left part of the navbar, it works well but when I do it for the right part, it doesn't work at all. Here my HTML and CSS:

HTML:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Der Elch</title>
    <link rel="stylesheet" href="Der%20Elch%20CSS.css">
</head>
<body class="homepage">
<header>
<a class="nav-left" href="#">Home</a>
<a class="nav-left" href="#">Lebensraum</a>
<a class="logo"><img class="logo" src="logo.png"></a>
<a class="nav-right" href="#">Fortpflanzung</a>
<a class="nav-right" href="#">Aussehen</a>
</header>

CSS:

body {
        font-family: sans-serif;
        margin: 0px;
}

.homepage {
        background-image:url(elch2.jpg)
}

header {
        height: 50px;
        background-color: green;
        padding-top:0px;
}

.logo {
        width:100px;
        height:100px;
        top: 0;
        left:50%;
        position: absolute;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: -50px;
}

.nav-left {
        float:left;
        padding-top: 15px;
        padding-bottom: 9px;
        padding-left: 100px;
        padding-right: 100px;
        text-decoration: none;
        color:aliceblue;
        transition: 0.1s;
}

.nav-left:hover {
        border-bottom: 5px solid white;
        bottom:-10px;
}

.nav-right { 
        padding-top: 15px;
        padding-bottom: 9px;
        padding-left: 100px;
        padding-right: 100px;
        float:right;
        text-decoration: none;
        color:aliceblue;
        text-align: center;
        transition: 1s;}
}

.nav-right:hover {
        border-bottom: 5px solid white;
        bottom:-10px;
}

Upvotes: 0

Views: 46

Answers (1)

Vitalii Zubriichuk
Vitalii Zubriichuk

Reputation: 26

You have an extra bracket, remove it:

.nav-right { 
     padding-top: 15px;
     padding-bottom: 9px;
     padding-left: 100px;
     padding-right: 100px;
     float:right;
     text-decoration: none;
     color:aliceblue;
     text-align: center;
     transition: 1s;
         }

Upvotes: 1

Related Questions