Click here to Skip to main content
15,886,137 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I found out when I have
CSS
position:fixed
in nav bar,
CSS
position:sticky
doesn't work.

How can I solve it?
HTML
  <nav class="nav">
           <div class="title">
               <h4><a href="#">Map</a></h4>
           </div>
            <ul class="nav-links">
               <li>
                   <a href="#"> HOME</a>
               </li>
               <li>
                   <a href="#">ABOUT
                   </a>
               </li>
               <li>
                   <a href=""> MAP</a>
               </li>
               <li>
                   <a href="#">Chronology</a>
               </li>
               <li>
                   <a href="#">CONTACT</a>
               </li>
            </ul>
            <div class="humberger">
               <div class="line line1"></div>
               <div class="line line2"></div>
               <div class="line line3"></div>
           </div>
            
        </nav>
       </div>
    <div class="chronology-title">
        <h1 class="capital">Chronology</h1>
    </div>
    <div class="chronology-table">
        <table>
            <tr>
                <th>date</th>	<th>location</th>	<th>victim</th> <th>cause of death</th><th>info</th>
            </tr>
                
<tr>	<td>a</td>	<td>b</td>	<td>c</td>	<td>d</td>	<td></td>	</tr>

What I have tried:

CSS for nav bar:
<pre lang="CSS">.nav {
    /* padding: 20px; */
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(212, 190, 188);
    min-height: 10vh;
    position: fixed;
    width:100%;
    
    /* right:0;
    left: 0; */
  
    z-index:200;
    padding:0 30px;

}

.humberger {
    position:relative;
    width: 50px;
    height: 40px;
  
    display:none;
    padding-left:30px;
    top:10px;
 
}

.humberger div {
    width: 25px;
    height: 2px;
    margin: 5px auto;
    background-color: #000000;
    

 }

.nav-links {
    display: flex;
    justify-content:space-around;
    align-items: center;
    /* position:relative; */
    /* right:15%; */
    width: 70%;

}

.nav-links li {
    list-style: none;
    margin-right: 30px;
    padding: 20px 0px;
    font-size: 26px;
    font-weight: 600;
    white-space: nowrap;
    /* font-family: 'Merienda', cursive; */
    text-transform: uppercase;
    text-align:center;
    
    
}

.nav-links li a {
    text-decoration: none;
    color: #000000;
    position: relative;
    transition: color 0.2s ease;

}

.nav-links li a::after {
   content:'';
   position: absolute;
   background-color: #fff;
   height: 3px;
   width: 0;
   left: 0;
   bottom: -5px; 
   transition: all 0.4s ease;
}

.nav-links li a:hover {
    color: #fff;
}
.nav-links li a:hover::after {
    width: 100%;
}


CSS for table:
CSS
.chronology-table {
    margin: 20px 100px 40px 100px;
}

table {
    border-collapse: collapse;

}


th {
position:sticky;
/* position: -webkit-sticky; */
 top:-1px;
 padding:10px;
 font-size:20px;
 border:1px solid black;
 background-color:rgba(220, 224, 193);
 text-transform: capitalize;
}


 th::before {
    content:'';
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
}

 table td {
    padding: 5px 10px;
    border: solid 1px black;
}
Posted
Updated 4-Dec-21 1:10am
Comments
Richard Deeming 6-Dec-21 5:03am    
It does work; it's just that your "fixed" element hides it.
lem0n2222 6-Dec-21 21:57pm    
Oh!!!! Thank you so much! I'm stupid!!

1 solution

position:sticky is difficult.
See the description here: position - CSS: Cascading Style Sheets | MDN[^]
It takes quite a bit of reading to get your head around it.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900