Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Ancho de navbar (fixed-bottom)

Estas en el tema de Ancho de navbar (fixed-bottom) en el foro de CSS en Foros del Web. Buenas, Tengo el siguiente html con 2 navbar fijos: uno inferior y otro superior: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE html> < html lang ...
  #1 (permalink)  
Antiguo 03/03/2018, 15:40
 
Fecha de Ingreso: octubre-2014
Ubicación: Lima
Mensajes: 74
Antigüedad: 9 años, 8 meses
Puntos: 1
Ancho de navbar (fixed-bottom)

Buenas,
Tengo el siguiente html con 2 navbar fijos: uno inferior y otro superior:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6.     <title>Navbar Fixed</title>
  7.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  8.     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  10. </head>
  11. <body style="height: 1500px;">
  12.     <nav class="navbar navbar-expand-md fixed-top bg-dark navbar-dark">
  13.         <!-- Brand -->
  14.         <a href="#" class="navbar-brand">Logo</a>
  15.  
  16.         <!-- Button Collapse -->
  17.         <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#barraColapsable3">
  18.             <span class="navbar-toggler-icon"></span>
  19.         </button>
  20.  
  21.         <!-- Collapse -->
  22.         <div class="collapse navbar-collapse" id="barraColapsable3">
  23.  
  24.             <!-- Links -->
  25.             <ul class="navbar-nav">
  26.                 <li class="nav-item">
  27.                     <a href="#" class="nav-link">Home</a>
  28.                 </li>
  29.                 <li class="nav-item dropdown">
  30.                     <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Enlace 2</a>
  31.                     <div class="drop dropdown-menu">
  32.                         <a href="#" class="dropdown-item">Opción 1</a>
  33.                         <a href="#" class="dropdown-item">Opción 2</a>
  34.                         <a href="#" class="dropdown-item">Opción 2</a>
  35.                     </div>
  36.                 </li>
  37.                 <li class="nav-item">
  38.                     <a href="#" class="nav-link">Enlace 3</a>
  39.                 </li>
  40.             </ul>
  41.         </div>
  42.     </nav>
  43.     <div class="container-fluid" style="margin-top: 80px;">
  44.         <h3>Barra de navegación fija en la parte superior e inferior</h3>
  45.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ipsa quos dolor nihil iste asperiores sed provident fuga assumenda fugit? Maiores sequi illum fugit enim facilis architecto nulla provident tenetur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, quae praesentium. Laboriosam voluptatem magni ex beatae eaque veniam ipsum suscipit ad iure nostrum voluptates, odit veritatis nesciunt fuga! Nam, repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat cumque sint quam amet repellendus magni iure laudantium illo perspiciatis deleniti, dolore modi impedit error, eligendi obcaecati est dolorem omnis! Eveniet! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam voluptas a blanditiis id facilis libero amet rerum iure voluptates deserunt quidem enim, error cupiditate nihil ratione nostrum atque sit obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Est debitis cupiditate quaerat facilis necessitatibus sequi quisquam vitae quibusdam reprehenderit impedit illum, hic voluptates beatae perspiciatis temporibus iure mollitia eos unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestiae consequatur. Adipisci eaque voluptatibus ducimus possimus ullam saepe. Impedit minima veniam quia distinctio sint pariatur recusandae rem exercitationem quod eos.</p>
  46.     </div>
  47.     <div class="navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  48.         <div class="navbar-text">
  49.             <a href="#" target="_blank" class="nav-link small">&copy; 2018 - Company name</a>
  50.         </div>
  51.     </div>
  52. </body>
  53. </html>
Deseo disminuir la altura del navbar inferior y mi primer intento fue el siguiente:
Código HTML:
Ver original
  1. <div class="navbar-expand-sm bg-dark navbar-dark fixed-bottom" style="height: 24px;">
  2.         <div class="navbar-text text-center">
  3.             <a href="#" target="_blank" class="nav-link small">&copy; 2018 - Company name</a>
  4.         </div>
  5.     </div>
Disminuye la altura del navbar, pero el ancla no se centra.
Favor si me echan una mano.

Muchas gracias, saludos.
  #2 (permalink)  
Antiguo 05/03/2018, 10:05
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años
Puntos: 177
Respuesta: Ancho de navbar (fixed-bottom)

no entiendo porque pondrias otro navbar como una suerte de footer solo para poner el copyright.

Si lo que buscas en un div con posicion fija y el copyright simplemente podes hacer esto:

HTML
Código HTML:
Ver original
  1. <div class="fixed-footer">
  2.       <a href="#" target="_blank">&copy; 2018 - Company name</a>
  3.  </div>

CSS
Código CSS:
Ver original
  1. .fixed-footer{
  2.     position: fixed;
  3.     left:0;
  4.     right:0;
  5.     bottom: 0;
  6.     background-color: #ddd;
  7.    text-align: center;
  8. }

Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho

Etiquetas: ancho, bootstrap, navbar, query
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:25.