HTML --- menu links are acting like plain text

Community Off Topic
1

I’m creating a website where the homepage is a faded live video as a background and then simple text on top or a call-to-action button and then a top navigation menu with a few pages and a logo.

These are my codes and my page is a stand-still, links are acting like plain text instead of clickable links. I have no idea what I’m doing wrong.

My second concern 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. Please help me!!!

edge
edge1366×729 78.4 KB

Thanks,
Mahiya

<!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 loop="loop" muted="muted">
			<source src="video.mp4" type="video/mp4">
			Video not supported
			</video>
		</div>
		
		<div class="div2 absolute">
			<nav class="animated fadeInDown">
				<img src="logo.png" alt="Arks Digital Marketing" class="logo">
				<a href="index.html" id="welcome">Welcome</a>
				<a href="ServicesOffered.html">Services Offered</a>
				<a href="Blogs.html">Blogs</a>
				<a href="ContactUs.html">Contact 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%;
	z-index: 1000;
	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: 25%;
	margin-bottom: 10px;
}
.content p {
	text-align: center;
	font-size: 20px;
	letter-spacing: 3px;
	color: #aaa;
}
nav {
	background-color: RGBA(0,0,0,0.2);
	position: fixed;
}
.logo {
	width: 15%;
	margin-left: 6%;
	margin-right: 20%;
}
#welcome{
    border-bottom: 6px solid #ff9d00;
	border-radius: 22%;
}
a {
	text-decoration: none;
	font-size: 2vh;
	font-size: 1.5vw;
	color: #fff;
	font-family: 'Segoe Script';
	margin-right: 6%;
	padding-bottom: 0.2%;
}
a:hover{
     border-bottom: 6px solid #ff9d00;
     border-radius: 22%;
	 color: #ff9d00;
.absolute {
	position: absolute;
	left: 0; right: 0; bottom: 0; top: 0;
}
2 
a:hover{
     border-bottom: 6px solid #ff9d00;
     border-radius: 22%;
	 color: #ff9d00;
// missing }
.absolute {
	position: absolute;
	left: 0; right: 0; bottom: 0; top: 0;
}

see comment in code.

if we use the inspector tool:

Screenshot_2018-05-31_22-21-04
Screenshot_2018-05-31_22-21-041920×1080 294 KB

we see you overlap, the links can’t be accessed given they are behind another elements (purple = padding of h1)

i can’t reproduce edge bug at the moment, given this would require a switch of OS.

1 Like
3

How do I bring the links forward from being behind the padding?

Mahiya

4

Why are you using padding-top? Padding is spacing inside the box (heading elements like h1 are boxes), if you want to move it down, isn’t something like margin better?

1 Like
5

I changed padding-top to margin-top 25%, still nothing

6

if i double/triple click on something like blogs it still selects Arks Digital Marketing so you still have overlap.

your <div class="content"> has a z-index of 1000, that is a lot, why? Do you understand what z-index does? It explains why in case of overlap its in the foreground.

1 Like
7

Wonderful! I used the Z-index for the navigation and now I’m able to see the links, yaay!! Thank you!!!

8

But do you understand z-indexes?

9

I’m still a beginner at coding but I have a passion for this so you have to excuse me for not knowing a lot yet. But from what I understand z-indexes are used to either put something in front of or behind something else. Please let me know if that’s not correct.

10

yes, in a sense that is true.

the computer screen use x and y axis to position everything on the screen, where (0, 0) is the top left corner. so margin-top: 50px would move an element 50px down the y-axis

the z-axis basically runs through your screen. So yes, it puts element before or behind other elements

1 Like
11

Hey, can you look at another question for me, I created a new post for it but haven’t received any suggestions yet. Thank you for the help and it’s making more sense to me now.

12

I saw it, but it again involved edge, which would require a reboot in order to run windows. So maybe later today.

13

I tried to add a collapsible menu using Javascript and for some odd reason now the hover links disappeared on me again. That’s the one i really need help with again. You mind looking at my codes one more time from the second post?