Need help with nav bar on my portfolio page

Hi!
I have a fixed nav bar with few buttons on my portfolio page but when I scroll down, the buttons get behind text/video and at that time I cannot press on the nav bar button to for example go to contact…

Post the entire html and css code here.

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet">
<title>AH</title>
</head>


<body>
<header id="header">
<div class="container">
<nav id="navbar">

<ul>
<li><a id="nav-link" href="#About_me">About me</a></li>
<li><a id="nav-link" href="#Work">Work</a></li>
<li><a id="nav-link" href="#Contact">Contact</a></li>
</ul>
</nav>
</div>
<img src="https://i.ibb.co/Mnm8Yfm/Image-2022-11-08-at-10-40.jpg" alt="A'H brand" >


</header>
<main>
<div id="Intro">
<h2>Heeeeeeeey! My name is Alan Hassan</h2>
<h3>I am a Frontend Developer</h3>
<p><I><strong>Need a page? then you've come to the right place..</strong></I></p>
</div>







<div id="Aboutme"><h2>About me</h2>

<div id="line1">

<p><strong>I am a self-taught web developer from Sweden.</p>

<p>I had never in my life imagined coding, even though I have spent much time at the computer from an early age.</p>

<p>I am also very interested in science and technology, because this time we're living in, is the time of science and technology.</strong></p></div>


<div id="Work"><h3>Work</3>
<div id="line2">
<div id="Work">

<iframe src="https://streamable.com/e/hm6iad?loop=0" frameborder="0"></iframe>
<div>
<div id="Contact"><h3>Contact</h3><div id="line3">
 <a href="mailto:99alanhassan@gmail.com" target="_blank" class="social-link"><i class="fa-solid fa-envelope"/></i><br>
   <div id=Contact>                
<a href="https://www.freecodecamp.org/alanhassan" target="_blank">
<i class="fa-brands fa-free-code-camp"></i></a></div>

<div id="adress"<p>&#169; 2022 Alan Hassan Portfolio Page</p></div>


</body>
</html>
Body {
Background-color:white;
Width: 100%;  }

.container {
color: red;
Font-size: 40px; 
Font-style: sans serif;
Background-color: white;
Width: 100%; 
Height: 96px; 
Margin: -9 -9;
Text-align: left; 
Position: fixed; 

}
H1 {
Bottom: 35px;  
Position: absolute; 
Font-size: 40px; 
Left: 10px; 
font-family: arial; 


}

Img {
Position: fixed;
Left:0; 
Width: 7.5%;
height: 12.5%;
Top: 2.5px;


}



Nav {
Position: fixed;
Width: 100%; 



 }

 
Nav li {
Display: inline-block;
Position: relative;  
left: 55rem; 
Font-size: 20px; 
Top: 12.5px;  
}
 



Nav li a {
  box-shadow: inset 0 0 0 0 white;
  color: black;
  
  transition: color 0.15s ease-in-out, box-shadow 0.7s ease-in-out;
font-size: 25px;
Text-decoration-line: none;
Margin: 30px; 
Border-radius: 5px; 
Justify-content: space-between;

}



Nav li a:hover {
  box-shadow: inset 100px 0 0 0 black;
  color: white;
}

Main { 
Position: absolute;
Top: 15rem; 
}
#Intro H2 {
Position: relative; 
Bottom: 5rem;
font-size: 40px; 
Font-family: Optima, sans seriff ;
left: 350px ;
}

#Intro H3 {
Position: relative; 
Font-size: 35px; 
Font-family: optima, sans seriff;
left: 30rem; 
Top: 0rem; }

#Intro p {
position: relative;
Font-size: 30px; 
font-family: optima, sans-seriff;
left: 22.5rem; 
Top: 3.5rem; 
}

#Aboutme h2 {
position: relative;
Top: 15rem; 
font-size: 40px; 
Font-family: optima, sans seriff;
left: 38.5rem;  
}

Div #line1 {
	height: 2.5px;
	background-color: black;
 Top: 230px; 
left: 18.5rem; 
Position: relative; 
Width: 50rem;
}

#Aboutme p {
position: relative;
top: 5.5rem; 
font-size: 22.5px; 
Font-family: optima, sans seriff;

}

#Work h3 {
position: relative; 
top: 40rem; 
font-size: 40px;
Font-family: optima, sans seriff; 
left: 42rem;
}

Div #line2 {
height: 2.5px;
	background-color:black;
 Top: 4rem; 
Right: 22rem; 
Position: relative; 
Width: 50rem;

}

Iframe {
Position: relative;
Top: 6rem; 
Width: 800px;
height: 600px;
left: 0.5rem;
}
 
#Contact h3{
position: relative; 
top: 8rem; 
font-size: 40px;
Font-family: optima, sans seriff; 
left: 21rem;

}

Div #line3 {
height: 2.5px;
	background-color: black;
 Top: 8.5rem; 
left: 0; 
Position: relative; 
Width: 52rem;

}

.fa-envelope{
font-size: 70px;
Position: relative;
Top: 3rem; 
left: 30rem; 
color: black;
Margin: 20px;
}

.fa-free-code-camp{
font-size: 70px;
Position: relative;
Top: -3.85rem; 
left: 17rem; 
color: black;
Margin: 20px;
}

Div #adress {
Font-size: 25px;  
Position: relative;
top: 10rem;
left: -19rem; 
font-family: courier;
}





Hi, maybe you can use a “z-index” property to bring the nav bar to front.

Hi!
It was maybe 4 months ago I was coding, I have forgot so much. Could you guide me through that?

Ok, the “z-index” is a property that specifies the order of elements, like layers. Elements with greater “z-index” will be in front of elements with lower "z-index"number.
So, if you put “z-index: 1” within Nav, should work, if not increase the number:

Nav {
Position: fixed;
Width: 100%;
z-index: 1;
}

Try it.

Hi!
It did not work.

It goes behind the iframe video if you understand what I mean?

  • You have duplicated ids. It is forbidden in html. Use class="nav-link"
  • <p><strong>I am a self-taught web developer from Sweden.</p>
    where is the closing strong tag?
  • delete the <div class="container"> and its closing tag
  • instead of Nav (you use Capital first letter for all elements and selectors!?) use:
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background-color: white;
  padding-bottom: 10px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
}
  • change completely the img selector:
img {
  position: fixed;
  top: 15px;
  left: 0; 
  width: 50px;
  margin-left: 10px;
  z-index: 10;
}
1 Like

Instead of use “z-index” in Nav, you can use in “.container”:
.container {
z-index: 1;
}

Try.

1 Like

Wow nice job, thank you very much for the help.

1 Like

Hi!
I went with Dobarbrend solution and it worked, thanks anyway mate.

A little light reading for you (sarcasm).

Dear AlanHassan,
The value for your id attribute should just be used once. You can’t use same id value more than once in a web page. Also, you will need to add a closing tag to strong tag (i.e. .
Going over to your CSS, remember you used “nav”, and not “Nav”. In your styling, use nav instead of Nav, since it’s what is written in your HTML.
I hope this helps.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.