My header looks like this:
If I hover over it, it increases slightly, to this:
What property needs to be changed in the CSS so that on-hovering it takes the entire height of the blue bar? I tried using width
since I am using border-box
, I thought the size of the blue bar wont change but it did.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-image: url(background.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.menu-bar {
background: rgb(3, 50, 112);
text-align: center;
}
.menu-bar ul {
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li {
width: 120px;
margin: 15px;
padding: 0px;
}
.menu-bar ul li a {
text-decoration: none;
color: white;
}
.active,
.menu-bar ul li:hover {
background-color: #2bab0b;
border-radius: 3px;
}
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<div >
<ul>
<li ><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Training </a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Edit :
As was suggested in the comment. I included height:30px;
in the hover class as including it in menu-bar
class did not seem to work. However what seems to be happening is that the size of green highlight is increasing while and the size of the blue bar:
CodePudding user response:
Is that the effect you are looking for ? I removed that margin from li
and added a padding on a
.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-image: url(background.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.menu-bar {
background: rgb(3, 50, 112);
text-align: center;
}
.menu-bar ul {
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li {
width: 120px;
}
.menu-bar ul li a {
text-decoration: none;
color: white;
display:block;
padding:15px;
}
.active,
.menu-bar ul li:hover {
background-color: #2bab0b;
border-radius: 3px;
}
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>
<body>
<div >
<ul>
<li ><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Training </a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
CodePudding user response:
Remove margin from li
.
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: rgb(3, 50, 112);
text-align: center;
}
ul {
display: inline-flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
width: 120px;
padding: 0px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #2bab0b;
border-radius: 3px;
}
.active {
background-color: #2bab0b;
border-radius: 3px;
}
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>
<body>
<div >
<ul>
<li ><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Training </a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
CodePudding user response:
This is what you are looking for. I modified your code and added some transition
on hovering
. Look at the following code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-image: url(background.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.menu-bar {
background: rgb(3, 50, 112);
text-align: center;
}
.menu-bar ul {
display: flex;
flex-direction: row;
list-style: none;
color: #fff;
}
.menu-bar ul li {
padding: 10px 12px;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 0.4s ease;
}
.menu-bar:hover li {
padding: 14px 12px;
transition: all 0.4s ease;
}
.menu-bar ul li a {
text-decoration: none;
color: white;
}
.active,
.menu-bar ul li:hover {
background-color: #2bab0b;
border-radius: 3px;
}
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<div >
<ul>
<li ><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Training </a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>