0

Necesito que los links del navbar estén más separados entre ellos.

Pensé usar margin: 5px con CSS, pero no sé si así será completamente responsive. Busqué otras maneras pero no encontré forma de hacerlo.

Así lo tengo ahora mismo:

![Navbar ahora

Así es más o menos como quiero espaciado que quede:

introducir la descripción de la imagen aquí

Adjunto mi código HTML:

 <!-- Nav -->
        <div id="nav-s-carousel" style="position: relative">
            <!-- para que esten sobrepuestos :) -->
            <nav class="navbar navbar-expand-lg navbar-dark">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">
                        <img src="assets/img/nav/DF-logonormalblanco2png.png" alt="">
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse d-flex align-items-end flex-column bd-highlight" id="InmoNav">
                        <ul class="navbar-nav p-2 bd-highlight  in-navbar-lists_links">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#"><i class="fa-solid fa-house"></i>&nbsp;Inicio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="nosotros.php"><i class="fa-solid fa-briefcase"></i>&nbsp;Nosotros</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="loteamientos.php"><i class="fa-solid fa-seedling"></i>&nbsp;Loteamientos</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contacto.php"><i class="fa-solid fa-envelope"></i>&nbsp;Contacto</a>
                            </li>
                            <!--<form class="d-flex">
                                <button style="margin-right: 5px" type="button" class="btn btn-outline-light"><i class="fa-solid fa-right-to-bracket"></i>&nbsp;Ya soy cliente</button> 
                                <button type="button" class="btn btn-outline-light"><i class="fa-solid fa-user-plus"></i>&nbsp;Registrarme</button>
                            </form>-->
                        </ul>
                    </div>
                </div>
            </nav>

Mi código CSS

    /* Navbar (Height: 3.5em) */
.body_esp nav {
    /*background-color: #679708;
    background-color: -webkit-gradient(
        linear, left top, left bottom, from(rgba(50,50,50,0.8)),
        to(rgba(80,80,80,0.2)), color-stop(.5,#333333);*/
    background: rgb(25,25,25);
    background: linear-gradient(0deg, rgba(25,25,25,0.020045518207282953) 0%, rgba(0,0,0,0.56) 55%, rgba(0,0,0,1) 100%);
    width: 100%;
    height: 4em;
    font-family: 'Inter', sans-serif;
    position: absolute !important;
    z-index: 2;
}

/* Logo brand */
.body_esp nav .navbar-brand img {
    width: 38%;
}

/* Links (Fuente: Open Sans, Color: blanco)*/ 
.body_esp nav .in-navbar-lists_links{
    font-family: 'Open Sans', sans-serif !important;
    font-size: 97%;
}

.body_esp nav .in-navbar-lists_links a {
    color: white !important;
}

.body_esp nav .in-navbar-lists_links #LoteamientosDropdown-cont a{
    color: #678a21 !important;
}
2
  • Hola. Si comentas y sobreescribes los estilos ofrecidos por Bootstrap cometes un error grave porque lo afectas globalmente. Crea clases adicionales para tu portada, asignales estilos convenientes y en tu html usa clases combinadas: las de bootstrap + las tuyas. Así cuentas con todo sin generar afectaciones no deseadas.
    – quevedo
    Commented el 14 feb. 2022 a las 1:09
  • @quevedo Si, eso siempre lo tomo en cuenta. Pero lo que estoy necesitando es separar los links del navbar
    – pabdani
    Commented el 14 feb. 2022 a las 1:11

1 respuesta 1

2

tal como te han indicado sobreescribir estilos predefinidos de Bootstrap no es la mejor practica, sin embargo, te dejo el siguiente codigo para que puedas apreciar como puedes modificar la clase sin afectar su correcto funcionamiento. Saludos

.new_link{
    letter-spacing: 4pt; /* para separar entre letras */
    word-spacing: 8pt;   /* separacion entre palabras */ 
    line-height: 22pt;   /* separacion entre lineas */ 
    text-indent: 28pt;   /* para sangrias */ 
  }
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>

  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="d-flex flex-grow-1">
            <span class="w-100 d-lg-none d-block">
                <!-- hidden spacer to center brand on mobile --></span>
            <a class="navbar-brand d-none d-lg-inline-block" href="#"> ORIGINAL</a>
      
        </div>
        <div class="flex-grow-1 text-right" id="myNavbar">
            <ul class="navbar-nav ms-auto flex-nowrap">
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">How We Help</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <hr>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="d-flex flex-grow-1">
            <span class="w-100 d-lg-none d-block">
                <!-- hidden spacer to center brand on mobile --></span>
            <a class="navbar-brand d-none d-lg-inline-block new_link" href="#"> MODIFICADO</a>
    
        </div>
        <div class="flex-grow-1 text-right" id="myNavbar">
            <ul class="navbar-nav ms-auto flex-nowrap new_link">
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">How We Help</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
   
  </body>
</html>

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.