HTML / CSS + JavaScript- The hover attributes are somehow not active

html-css

#1

I have coded a few times in an intro class in college but I recently picked it up using tutorials and I realize I love doing it. So please don’t judge me for my lack of experience.

I’m having two issues with my codes. The first one is my hover attributes are not working; recently I tried to add a responsive menu bar using javascript and somehow the hover elements in the existing nav-bar became inactive.

The second issue I’m having is checking the page in chrome looks perfect, but when I check it again in Microsoft Edge, the video doesn’t fill the page, it isn’t resizing, there’s a weird border happening on both sides. I’ve attached a screenshot of what it looks like in MS-Edge.


If you have any suggestions, please let me know. The codes are below:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="description" content="">
		<meta name="author" content="">
		
		<title>Arks Digital Marketing</title>
		<link rel= "stylesheet" href="style.css" />
	
	</head>

	<body>
		<div class="background-wrap">
		
		<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
			<source src="video.mp4" type="video/mp4">
			Video not supported
		</video>
		</div>
		
		<div class="div2 absolute">
			<nav class="animated fadeInDown">
				<div class="toggle">
						<i class="fas fa-bars"></i>
				</div>
				</nav>
				<a class= "aimg" href="Index.html">
					<img src="logo.png" alt="logo" class="logo">
				
				<a href="ServicesOffered.html">Services Offered</a>
				<a href="Blogs.html">Blogs</a>
				<a href="AboutUs.html">About Us</a>
				<a href="PartnerWithUs.html">Partner with Us</a>
			</nav>
		</div>
			
		<div class="content">
		
			<h1>Arks Digital Marketing</h1>
			<p>Helping businesses reach new levels of growth!</p>
		</div>
	
	
	
	</body>
</html>
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Calibri, sans-serif;
}
.background-wrap {
	position: fixed;
	z-index: -1000%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
	left: 0;
}
#video-bg-elem {
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.content {
	position: absolute;
	width: 100%;
	min-height: 100%;
	background-color: rgba(0,0,0,0.3);
}
.content h1 {
	text-align: center;
	font-size: 65px;
	text-transform: uppercase;
	font-weight: 300;
	color: #fff;
	padding-top: 20%;
	margin-bottom: 10px;
	z-index: -10000;
}
.content p {
	text-align: center;
	font-size: 20px;
	letter-spacing: 3px;
	color: #aaa;
}
.logo {
	width: 10%;
	margin-left: 6%;
	margin-right: 25%;
}
#services-offered{
    border-bottom: 6px solid #ff9d00;
	border-radius: 22%;
}
#blogs{
    border-bottom: 6px solid #ff9d00;
	border-radius: 22%;
}
#AboutUs{
    border-bottom: 6px solid #ff9d00;
	border-radius: 22%;
}
#PartnerWithUs{
    border-bottom: 6px solid #ff9d00;
	border-radius: 22%;
}
a {
	text-decoration: none;
	font-size: 2vh;
	font-size: 2.3vw;
	font-family: 'Freestyle Script';
	font-weight: 900;
	margin-right: 5%;
	color: rgb(210, 21, 84);
	padding-bottom: 0.2%;
}
a:hover{
     border-bottom: 6px solid #ff9d00;
     border-radius: 22%;
	 color: #ff9d00;	
}
.aimg:hover {
	border-bottom: none;
}
.absolute {
	position: absolute;
	left: 0; right: 0; bottom: 0; top: 0;
}
.toggle {
	width: 100%;
	padding: 10px 20px;
	background: #001f44;
	text-align: right;
	box-sizing: border-box;
	color: #fff;
	font-size: 30px;
	display: none;
}
nav.animated.fadeInDown{
	background-color: RGBA(0,0,0,0.2);
	position: fixed;
	padding: 75px 711px;
}
@media (max-width:768px)
{
	.toggle
	{
		display: block;
	}
	a{
		width: 100%;
	}

HTML --- menu links are acting like plain text
#2

z-index: -1000%; is invalid, i would highly recommend learning to use the dev tools:

https://developers.google.com/web/tools/chrome-devtools/

to inspect the page and so on. Really helpful.

There is no JavaScript (JS) code within the code samples you provided? Why are so many elements absolute and fixed?