CODEWITHSUNDEEP
htmlcss
shemjay
shemjay

Reputation: 124

how to fix hover in navbar only highlighting the top half of element

My website has a lot of flaws I know like with the background image and all but the most annoying one is how my hover animation only highlights the top half of my navbar elements. I would like for the hover to cover the entire div instead of just the top half of the element. Im pretty sure the problem arises from how I center my elements i'm not proficient at all with that. Any help much appreciated. Thanks.

HTML:

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <link rel = "stylesheet" type = "text/css" href = "styles.css"/>
    <title>Newberry College</title>
</head>
<body>
    <div class = "header">
        <div class = "logo">
            <h1><a href = "#">Newberry College</a></h1>
        </div>
        <ul>
            <li><a = href = "#">About</a></li>
            <li><a = href = "#">School</a></li>
            <li><a = href = "#">Student</a></li>
            <li><a = href = "#">Resources</a></li>
        </ul>
    </div>
    <div id="background-img"></div>
</body>
</html>

CSS:

/*Removes default page formatting*/
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'Raleway', 'Arial', 'serif'
}
#background-img {
    background: url(school.jpg);
    background-repeat: no-repeat;
    height: 100vh;
  }
/*Formats logo*/
.logo{
    width: 320px;
    background-color: #D50074;
    float: left;
    height: 100%;
}

.logo h1{
    font-size: 26px;
    text-transform: uppercase;
    padding: 35px 10px 0 10px;
}

.logo a{
    color: #3609BB;
}

/*Formats the header div*/
.header {
    width: 100%;
    height: 100px;
    display: block;
    background-color: #9c01A7;
}


/*Styles list*/
.header ul li{
    list-style: none;
}

/*Styles list elements*/
.header ul li a{
    padding: 40px 20px 0 0;
    float: right;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
}

/*Styles link hover*/
.header ul li a:hover{
    background: #3609BB; 
    }

This is the problem at hand

Upvotes: 0

Views: 455

Answers (1)

xSkj
xSkj

Reputation: 26

Remove the two 0s from:

/*Styles list elements*/
.header ul li a{
    padding: 40px 20px 0 0; /* <--- here */

This is the same as padding: 40px 20px 40px 20px, which would also work.

Upvotes: 1

Related Questions