0

adjunto esta pregunta por que tengo una duda sobre algo que esta pasando en mi barra de navegacion y no le encuentro respuesta , adjunto una foto y parte del codigo para que puedan ver por su cuenta a ver si me pueden dar una idea

Es responsive mi navbar , la unica duda es que al jugar con los tamaños del navegador me encuentro esos casos donde queda cortada y trate de pensar el motivo no logro sacarlo

Imagen 1 ejemplo1

ejemplo2

Desde ya muchas gracias gente Espero que entiendan la duda , cualquier cosa edito la publicacion

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- 
         fit=no" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title>NEU - Nueva Editorial Universitaria</title>
  <!-- Favicon-->
  <link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo- 
         32x32.webp" />
  <link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo- 
         180x180.webp" />
  <link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo- 
         192x192.webp" />
  <link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo- 
         270x270.webp" />
  <!-- Bootstrap icons-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap- 
        icons.css" rel="stylesheet" type="text/css" />
  <!-- Google fonts-->
  <link href="https://fonts.googleapis.com/css? 
         family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
  <!-- Core theme CSS (includes Bootstrap 5.1)-->
  <link href="css/styles.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <!-- Font Awesome-->
  <link href="/Public/assets/FontaWesome-6.0.0/css/all.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <!--------------------------------------INICIO BARRA DE NAVEGACIÓN------------------------------------>
  <div class="fixed-top" style="background-color: #30408B;">
    <div class="container">
      <div class="row">
        <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #30408B;">
          <a class="navbar-brand" href="index.html" title="Inicio">
            <img src="/Public/assets/img/logo1.webp" width="250" class="d-inline-block align-top pb-2" alt="Logo NEU">
          </a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>

          <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav">
              <li class="nav-item active ms-5"><a class="nav-link" href="#" title="Inicio">INICIO</a></li>
              <li class="nav-item ms-5"><a class="nav-link" href="institucional.html" title="Institucional">INSTITUCIONAL </a></li>
              <li class="nav-item ms-5"><a class="nav-link" href="subSecretaria.html" title="SubSecretarÍa General">SUBSECRETARÍA</a></li>
              <li class="nav-item ms-5"><a class="nav-link" href="catalogo.html" title="Catálogo">CATÁLOGO</a></li>
              <li class="nav-item ms-5"><a class="nav-link" href="comercializacion.html" title="Comercialización">COMERCIALIZACIÓN</a></li>
            </ul>
            <div class=" row col-md-4 col-sm-8 d-flex ms-5">
              <div class="col-2 pl-1 pl-2">
                <a class="nav-redes" href="https://www.facebook.com/NEU-nueva-editorial-universitaria-347188832343695/" title="Facebook" target="_blank"><i class="bi-facebook fs-3"></i></a>
              </div>
              <div class="col-2 pl-1 pr-2">
                <a class="nav-redes" href="https://twitter.com/NeuUnsl" title="Twitter" target="_blank"><i class="bi-twitter fs-3"></i></a>
              </div>
              <!--div class="col-4" style="margin: 0 0 0 0;">                  
                                    <input class="form-control" id="myInput" type="text" placeholder="Buscador">
                                    </div-->
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>

</body>

</html>

1 respuesta 1

1

Intenta agregando stilo al img:

style="width: 100%; min-width: 100px; min-height: 100px; max-height: 150px;"

he cambiado el src del logo para efectos de prueba, ver:

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>




<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- 
         fit=no" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title>NEU - Nueva Editorial Universitaria</title>
  <!-- Favicon-->
  <link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo- 
         32x32.webp" />
  <link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo- 
         180x180.webp" />
  <link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo- 
         192x192.webp" />
  <link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo- 
         270x270.webp" />
  <!-- Bootstrap icons-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap- 
        icons.css" rel="stylesheet" type="text/css" />
  <!-- Google fonts-->
  <link href="https://fonts.googleapis.com/css? 
         family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
  <!-- Core theme CSS (includes Bootstrap 5.1)-->
  <link href="css/styles.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <!-- Font Awesome-->
  <link href="/Public/assets/FontaWesome-6.0.0/css/all.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <!--------------------------------------INICIO BARRA DE NAVEGACIÓN------------------------------------>
  <div class="fixed-top" style="background-color: #30408B;">
    <div class="container">
      <div class="row">
        <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #30408B;">
          <a class="navbar-brand" href="index.html" title="Inicio">
            <img style="width: 100%; min-width: 100px; min-height: 100px; max-height: 150px;" src="https://logodownload.org/wp-content/uploads/2015/02/burger-king-logo-1-1.png" width="250" class="d-inline-block align-top pb-2" alt="Logo NEU">
          </a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>

          <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav">
              <li class="nav-item active ms-5"><a class="nav-link" href="#" title="Inicio">INICIO</a></li>
              <li class="nav-item ms-5"><a class="nav-link" href="institucional.html" title="Institucional">INSTITUCIONAL </a></li>
              <li class="nav-item ms-5"><a class="nav-link" href="subSecretaria.html" title="SubSecretarÍa General">SUBSECRETARÍA</a></li>
              <li class="nav-item ms-5"><a class="nav-link" href="catalogo.html" title="Catálogo">CATÁLOGO</a></li>
              <li class="nav-item ms-5"><a class="nav-link" href="comercializacion.html" title="Comercialización">COMERCIALIZACIÓN</a></li>
            </ul>
            <div class=" row col-md-4 col-sm-8 d-flex ms-5">
              <div class="col-2 pl-1 pl-2">
                <a class="nav-redes" href="https://www.facebook.com/NEU-nueva-editorial-universitaria-347188832343695/" title="Facebook" target="_blank"><i class="bi-facebook fs-3"></i></a>
              </div>
              <div class="col-2 pl-1 pr-2">
                <a class="nav-redes" href="https://twitter.com/NeuUnsl" title="Twitter" target="_blank"><i class="bi-twitter fs-3"></i></a>
              </div>
              <!--div class="col-4" style="margin: 0 0 0 0;">                  
                                    <input class="form-control" id="myInput" type="text" placeholder="Buscador">
                                    </div-->
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>

</body>

</html>

Tu Respuesta

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

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