I developed a navigation bar and split it into 3 distinct sections: 1. id="menu" 2. id="fake" (button to fill space) 3. id="social"
My main goal is to exclude the .active page and the fake button from the hover effect, but it seems that using a:hover:not(.fake) isn't effective. I also wondered if it's feasible to have multiple exceptions.
Here is the complete code:
body{
font-family:'Skranji',sans-serif;
font-size:100%;
margin:0;
}
#nav{
margin:0;
padding:0;
width:100%;
height:35px;
position:fixed;
overflow-y:hidden;
font-size:16px;
letter-spacing:3px;
border-bottom-style:solid;
border-bottom-width:1px;
border-color:black;
}
#nav a:not(.active){
background-color:rgba(0, 0, 0, 0.72);
}
#nav a.active{
background-color:black;
color:white;
}
#nav a:hover:not(.active){
background-color:rgba(128, 127, 127, 0.25);
color:black;
}
#menu{
width:70%;
}
#fake{
width:15%;
display:block;
float:left;
}
#social{
width:15%;
float:left;
}
#menu a{
display:table;
width:25%;
float:left;
}
#fake a{
width:100%;
display:table;
}
#social a{
float:right;
width:33.33%;
}
#menu a,#social a,#fake a{
text-decoration:none;
margin:0;
padding:5px;
color:white;
text-align:center;
}
.rMargin{
margin-right:10px;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css.css">
<link href="https://fonts.googleapis.com/css?family=Skranji" rel="stylesheet">
</head>
<body>
<header>
<div id="nav">
<div id="menu">
<a class="active" href="home.html"><i class="fas fa-home rMargin"></i>Home</a>
<a href="blog.html"><i class="fas fa-globe rMargin"></i>Blog</a>
<a href="learn.html"><i class="fas fa-code rMargin"></i>Learn</a>
<a href="contactMe.html"><i class="fas fa-envelope rMargin"></i>Contact Me</a>
</div>
<div id="fake" >
<a class="fake" href="#"><button style="visibility:hidden"></button></a>
</div>
<div id="social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</div>
</div>
</header>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>