Home > Software engineering >  My nav bar is not clickable, what went wrong?
My nav bar is not clickable, what went wrong?

Time:11-14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
    <title>Contact Us</title>

    
    <style>

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        .hero {
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(black 0%, black 34%, white 34%, white 100%);
            position: relative;
            padding: 0 5%; 
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: auto;
            
        }
        
      nav {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

nav .logo {
    width: 100px;
    margin-left: -80px;

}

nav ul li {
    list-style: none;
    display: inline-block;
    margin-left: 40px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 17px;

}
        
        .content {
            text-align: left;
        
        
        }
        
        .content h1{
            font-size: 70px;
            color: rgb(255, 255, 255);
            font-weight: 600;
            transition: 0.5s; 
            margin-bottom: 700px;
        
        }
        
        
        
        .content h1:hover{
            -webkit-text-stroke: 2px #fff;
            color: transparent; 
        
        
        }
        
        .banner {
            position: relative;
            width: 90%;
            margin: 50px auto;
        
        }

    



        .heading {
            position: absolute;
            top: 50%; 
            width: 50%;
            margin-top: -400px;
            margin-left: 650px;
            text-align: center;
            font-size: 3rem;

        }
        
        .food{
            width: 400px;
            position:absolute; 
            margin-top: -500px;
            margin-left: 580px;
            opacity: 0.4;
            transition: opacity .3s ease;
            background-color: rgba(0,0,0,0.6);

        }


    

.contact-info{
  display: inline;
  width: 100%;
  max-width: 1200px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  margin-top: 320px;
}


.card{
  background: #fff;
  padding: 0 20px;
  margin: 0 10px;
  width: calc(33% - 20px);
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(0, 0, 0);
  cursor: pointer;
}

.card-icon{
  font-size: 28px;
  background: #ff6348;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px !important;
  border-radius: 50%;
  transition: 0.3s linear;
}

.card:hover .card-icon{
  background: none;
  color: #ff6348;
  transform: scale(1.6);
}

.card p{
  margin-top: 20px;
  font-weight: 300;
  letter-spacing: 2px;
  max-height: 0;
  opacity: 0;
  transition: 0.3s linear;
}

.card:hover p{
  max-height: 40px;
  opacity: 1;
}



.contact{
    position: relative;
    min-height: 100vh;
    padding: 50px 100px;
    display: inline;
    justify-content: center;
    align-items: center;
    flex-direction: column;


}





.contactform {
    width: 500px;
    padding: 10px;
    background: #fff;
    margin-top: 280px;
}

.contatform h2 {
    font-size: 30px;
    color: #333;
    font-weight: 500;
}

.contactform .inputBox{

    position: relative;
    width: 100%;
    margin-top: 10px;

}

.contactform .inputBox input,
.contactform .inputBox textarea{

    width: 100%;
    padding: 5px 0;
    font-size: 16px;
    margin: 10px 0;
    border: none;
    border-bottom: 2px solid #333;
    outline: none;
    resize: none;

}





.contactform .inputBox input [type="submit"]

{
    width: 100px;
    background: #00bcd4;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 18px;
}

.map iframe {

width: 300px;
height: 400px;
display: flex;
flex-direction: row;
margin-top: 100px;

}




@media (max-width: 991px)
{

.contact{
    padding:50px;

}

.container {
    flex-direction: column;
}

.container .contact-info2 {
    margin-bottom: 40PX;

}

.container .contact-info2,
.contatform{
    width: 100%;

}
}






       

        @media screen and (max-width:800px) {
            .contact-info{
                flex-direction: column;
            }
            
            .card{
                 width: 100%;
                 max-width: 300px;
                 margin: 10px 0;
                }
            }








        footer {
            text-align: center;
            background-color: rgb(29, 17, 17);
            color: #fff;
            padding: 12px;
            position: absolute;
            bottom: 0;
            width: 100%;
            margin-top: 40px;
        }
        



        
         </style>
        </head>
        
        
        <body>
            <div >
    
        
        
        
    <nav>
    <img src="logo.png" >
    <ul>
    <li><a href="Turkish_grill2.html">Home</a></li>
    <li><a href="photos.html">Photos</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>

    </nav>
                
    <div >
        <div class ="row">
            <div class = "banner">
                <img  src="food.jpeg" alt="[food]">
                <h1 class ="heading">Contact Us</h1>
                
            </div>
        </div>
                    
    </div>

    <div >
        <div >
          <i ></i>
          <p><a href="mailto:[email protected]">[email protected]</a></p>
        </div>
  
        <div >
          <i ></i>
          <p> 4799221199</p>
        </div>
  
        <div >
          <i ></i>
          <p>Karl Johans gate 5, 0154 OSLO</p>
        </div>
      </div>




      <div > 
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2000.2351438173973!2d10.
    746176751774849!3d59.911644771148914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416e89e0be32c5%
    3A0xa9aad198e39ddef9!2sKarl Johans gate 5, 0154 Oslo!5e0!3m2!1sno!2sno!4v1667850923403!5m2!1sno!2sno" 
    style="border:0;" 
    allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
       </iframe>
    </div>




      <section >
        
            
            
            <div >
                <form action="">

                    <h2>Send Message</h2>
                    <div >
                        <input type="text" name="" placeholder= "Full Name" required="required">
                        
                    </div>

                    <div >
                        <input type="text" name="" placeholder="Email" required="required">
                        
                    </div>
                        
                        <div >
                            <textarea  placeholder="Type Your Message" required="required"></textarea>
                           
                    </div>
                    
                    <div >
                        <input type="submit" name="" value="Send">
                        
                        
                    </div>
                    </div>
                </form>
           
        

        </section>

   



       
            <footer>
                <p>Just Turkey Grill is a 501c(3)
                    organization, and your contributions are tax
                    deductible.</p>
                    <p id="copyright">Copyright &copy; 2022 by the Just Turkey Grill. 
                        Questions?
                    <a href="mailto:[email protected]"
                    >Mail Mehmet Under.</a></p>
            </footer> 
                    
                    <!-- footer -->
            </div>           
        </body>
        </html>

I did nothing special. The first second it worked and the other, it stopped being clickable. I need help straight away because I have to give in this task about 2 hours. The only thing I changed was the section area, but nothing more. I just changed the form and added back the map, and changed and added more css code.

CodePudding user response:

Just add z-index: 1 to your navbar and should be work

CodePudding user response:

With the inspector of your browser you can see that the "contact" section goes over the navbar, you have to put a higher z-index on the navbar so that it goes over it

  • Related