• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

134
Vistas
Sticky Navigation bar <a> tags

I'm very new to html/css/JS and I've made a sticky Navigation bar for my page but I'm having trouble with where the clickable area is for my tags on the navbar. I've some how gotten the clickable area to the left of my text not the text itself. If someone could shed some light on what I've done wrong it would be a massive help. Thanks!

<div class="page-navigation">
  <nav id="navbar">
    <div class="social">
      <img src="Images/facebook-logo.png" alt="facebook link" />
      <img src="Images/twitter-logo.png" alt="twitter link" />
      <img src="Images/linkedin-logo.png" alt="linkedin" />
    </div>
    <img
      src="Images/Logo-ADC%20Systems.png"
      class="logo"
      alt="Logo ADC Systems"
    />
    <ul id="menu">
      <li><a class="nav__links" href="index.html"></a>Home</li>
      <li><a class="nav__links" href="About%20us.html"></a>About Us</li>
      <li><a class="nav__links" href="Services.html"></a>Services</li>
      <li><a class="nav__links" href="Contact%20us.html"></a>Contact Us</li>
    </ul>
  </nav>

.home-navigation{
width: 100vw;
height: 100vh;
background-image: url("Images/Home-Background.jpg");
background-size: cover;
}

.page-navigation{
width: 100vw;
height: 80vh;
background-color: #2D3142;
background-size: cover;
}
.social{
float: right;
padding-right: 0.8rem
}
.social img{
width: 40px
}

nav{
position: relative;
z-index: 1;
Width: 100%;
padding: 0px;
text-align: center;
box-sizing: border-box
}

#navbar a {
float: left;
color:#2D3142;
text-align: center;
padding: 14px;
text-decoration: none;

}
.logo{
width: 300px;
margin: 5px 0;


}   
nav ul{
background: #FFFFFF;
width: 100%;
margin-top: 5px;    
}   
nav ul li{
position: relative;

display: inline-block;
list-style: none;
margin: 20px 30px;
color: #EF8354;
cursor: pointer;

}   


#navbar ul li:hover{
color:#2D3142;
transition: 0.3s ease-out;
}

nav.sticky{
position: sticky;
top: 0;
left: 0;
padding: 10px 8%;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
transition: padding 1s;
}

nav.sticky ul{
width: auto;
}
9 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

See

<li><a class="nav__links" href="index.html"></a>Home</li>

They should be the following, note where the Home is, inside the link not outside

<li><a class="nav__links" href="index.html">Home</a></li>
9 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.