0

Hola tengo la siguiente navbar en html y css

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">
            <img src="{{ asset('images/logo/l-1.png') }}" alt="Logo" class="navbar-logo"> WebMy
        </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" 
        data-toggle="collapse" data-target="#navbarResponsive" 
        aria-controls="navbarResponsive" aria-expanded="false" 
        aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#about">¿Quienes somos?</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#services">Nuestro Servicio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#portfolio">Road Map</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#contact">Contactanos</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Esto se ve algo asi: Imagen nav bar

Mi problema viene cuando a la hora de utilizar el hiperenlace el "espacio de click" no coincide como deberia adjunto foto donde se ve el raton haciendo click fuera de las letras y el logo (Las letras se ponen en negro al poner el raton encima) Error Click

Por ultimo adjunto el codigo css aunque le he hecho varias modificacion intentando solucionar el problema (paddin, margin, height, weight, etc...)

/*navbar*/
.navbar-light {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(0,0,0,.7);

}

.navbar-brand.js-scroll-trigger {
    padding-right: 500px;
}

.navbar-light .container a, .navbar-light .container .collapse .navbar-nav .nav-item .nav-link{
    color: var(--primary-font-color1);
    white-space: nowrap;
    
}

.navbar-logo{
    width: 40%;
    height: 40%;
}
/*navbar*/

Tambien podeis descargar el proyecto de laravel completo desde este enlace de github por si os falta algun tipo de dato, igualmente estoy pendiente a cualquier respuesta, gracias de antemano

3
  • 1
    Al ojo tu clase .navbar-brand.js-scroll-trigger esta causando tu problema ya que padding aumenta el área activa de tu elemento, en este caso tu brand, cambialo por margin-right,
    – Jimmy
    Commented el 15 ene. a las 16:54
  • Lo acabo de cambiar y era eso (que sencillo lo veo ahora XD) muchas gracias por la solucion
    – Anthonyx82
    Commented el 15 ene. a las 17:10
  • 1
    Diríamos que es una manera rápida de resolverlo pero en realidad no debería ser así, ya que tu página no se vería bien en todos los dispositivos, eso tendrías que solucionar por ejemplo con la propiedad flex de css.
    – Jimmy
    Commented el 15 ene. a las 17:58

1 respuesta 1

0

Simplemente había que cambiar el padding ya que aumenta el tamaño del area activa asi como me ha comentado @Jimmy y lo he cambiado con margin en lugar de padding

.navbar-brand.js-scroll-trigger {
    margin-right: 500px;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.