how to make the nav-bar fixed and on top of the page and not overlapable
how to make the nav-bar fixed and on top of the page and not overlapable
so I'm still a beginner and my question may sound silly to others ,however, I need to fix this problem so this is my html
html
<!DOCTYPE html>
<html lang="en">
<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">
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="first">
<h1>Test Page</h1>
<div id="header">
<ul id="nav">
<li class="head"><a href="http://">Home</a></li>
<li class="head"><a href="http://">about</a></li>
<li class="head"><a href="http://">Contact</a></li>
<li class="head"><a href="http://">Our products</a></li>
</ul>
</div>
</div>
<div id = "p">
<p>Libero cupiditate tempore autem animi iusto, expedita neque voluptatibus dolor sequi quia nihil quam magnam, magni praesentium nam aut ipsum soluta nulla et, eum sed? Explicabo modi similique nobis nesciunt!</p>
<p>Itaque, corrupti quae corporis excepturi eum vero, rem aliquam dolorem, adipisci maxime deleniti. Dicta beatae voluptatum maiores nesciunt, ducimus eveniet. Reprehenderit doloremque, laboriosam repellat rerum adipisci dolores quia sapiente cupiditate!</p>
<p>Voluptatibus tenetur sit tempore inventore optio nihil nostrum sapiente neque, odio ipsa atque? Tenetur earum voluptatum omnis dignissimos dolores reprehenderit sint quo ducimus, cumque inventore laboriosam asperiores laborum nemo perferendis.</p>
<p>Minima ab blanditiis, rerum voluptas dicta ducimus, voluptates itaque reprehenderit numquam mollitia possimus quod amet harum non eius perferendis iste saepe rem maiores est. Similique minus consequatur reiciendis voluptatem quibusdam.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni minus aspernatur ullam eligendi illum laboriosam, quas omnis facilis voluptatum quis iste ipsam ut aliquam praesentium dolorem. Fugit assumenda nobis distinctio.</p>
</div>
<footer> <p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
Personal Email</a>.</p>
</footer>
</body>
</html>
the nav-bar over laps with the paragraphs as you notice I made the position of #header fixedand I made #first top:0;
I can't figure out the problem and if I were to make a sidebar how to prevent it from overlapping with other elements or even how to prevent elements from overlapping with other elements?
#header
fixed
#first top:0;
#first
top:0;
#header
position: fixed;
#nav
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightcoral;
border: lightcoral solid;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
#nav li
float: left;
padding: 2rem 2rem;
#nav li a
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
#nav li a:hover
color: dimgray;
#nav li:hover
border: (214, 20, 124) solid;
background-color:rgb(214, 20, 124);
color: dimgray;
border-radius: 0.5rem;
#nav li:last-child
float: right;
2 Answers
2
#first
top:0;
position: fixed;
background-color:white;
width:100%;
#header
position: fixed;
width:98%;
#nav
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightcoral;
width:100%;
border: lightcoral solid;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
#nav li
float: left;
padding: 2rem 2rem;
#nav li a
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
#nav li a:hover
color: dimgray;
#nav li:hover
border: (214, 20, 124) solid;
background-color:rgb(214, 20, 124);
color: dimgray;
border-radius: 0.5rem;
#nav li:last-child
float: right;
#p
margin-top:200px;
<!DOCTYPE html>
<html lang="en">
<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">
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="first">
<h1>Test Page</h1>
<div id="header">
<ul id="nav">
<li class="head"><a href="http://">Home</a></li>
<li class="head"><a href="http://">about</a></li>
<li class="head"><a href="http://">Contact</a></li>
<li class="head"><a href="http://">Our products</a></li>
</ul>
</div>
</div>
<div id = "p">
<p>Libero cupiditate tempore autem animi iusto, expedita neque voluptatibus dolor sequi quia nihil quam magnam, magni praesentium nam aut ipsum soluta nulla et, eum sed? Explicabo modi similique nobis nesciunt!</p>
<p>Itaque, corrupti quae corporis excepturi eum vero, rem aliquam dolorem, adipisci maxime deleniti. Dicta beatae voluptatum maiores nesciunt, ducimus eveniet. Reprehenderit doloremque, laboriosam repellat rerum adipisci dolores quia sapiente cupiditate!</p>
<p>Voluptatibus tenetur sit tempore inventore optio nihil nostrum sapiente neque, odio ipsa atque? Tenetur earum voluptatum omnis dignissimos dolores reprehenderit sint quo ducimus, cumque inventore laboriosam asperiores laborum nemo perferendis.</p>
<p>Minima ab blanditiis, rerum voluptas dicta ducimus, voluptates itaque reprehenderit numquam mollitia possimus quod amet harum non eius perferendis iste saepe rem maiores est. Similique minus consequatur reiciendis voluptatem quibusdam.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni minus aspernatur ullam eligendi illum laboriosam, quas omnis facilis voluptatum quis iste ipsam ut aliquam praesentium dolorem. Fugit assumenda nobis distinctio.</p>
</div>
<footer> <p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
Personal Email</a>.</p>
</footer>
</body>
</html>
I noticed you are not defining z-index for any of these elements. Try modifiying your css on this element and let me know if this is the solution you are looking for:
#first
top:0;
z-index: 9998;
#header
position: fixed;
z-index: 9999;
here is a screenshot1
z-index lets you order your layers and define what should be on top of what. Maybe I'm not understanding the problem you are trying to solve. I'll add this in a snippet.
– zJorge
Sep 3 at 19:47
Please take a look at the snippet @AbdullahZareaa and let me know if this is what you were looking after.
– zJorge
Sep 3 at 19:57
yeah, the #nav is not covering the whole area
– Abdullah Zareaa
Sep 3 at 20:05
I added a 100% width to #nav so it can take the whole width. Please take a look now. I will need some tweaking in order to look pixel perfect but that's the idea. Notice that I added a margin top to #p so it will start below that #header and not underneath.
– zJorge
Sep 3 at 20:32
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
This is the bootstrap class that will solve your problem. Use it as it is
For further info do read
Blockquote
https://getbootstrap.com/docs/4.0/components/navbar/
I wan to know how to build one on my own, then, later I can use bootstrap also I want to know to prevent elements from overlapping
– Abdullah Zareaa
Sep 3 at 19:44
raw.githubusercontent.com/AlanSimpsonMe/Responsive_Nav_Bar/… Please check this code, I now understand what you asked for.
– Harshit Pant
Sep 3 at 19:48
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
It didn't work, and , what is a z-index?
– Abdullah Zareaa
Sep 3 at 19:42