[SOLUCIONADO] Ancho de navbar (fixed-bottom)

eduar2083 · #1 (**permalink**) 03/03/2018, 15:40

Buenas,
Tengo el siguiente html con 2 navbar fijos: uno inferior y otro superior:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navbar Fixed</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="height: 1500px;">
    <nav class="navbar navbar-expand-md fixed-top bg-dark navbar-dark">
        <!-- Brand -->
        <a href="#" class="navbar-brand">Logo</a>
 
        <!-- Button Collapse -->
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#barraColapsable3">
            <span class="navbar-toggler-icon"></span>
        </button>
 
        <!-- Collapse -->
        <div class="collapse navbar-collapse" id="barraColapsable3">
 
            <!-- Links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Enlace 2</a>
                    <div class="drop dropdown-menu">
                        <a href="#" class="dropdown-item">Opción 1</a>
                        <a href="#" class="dropdown-item">Opción 2</a>
                        <a href="#" class="dropdown-item">Opción 2</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Enlace 3</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container-fluid" style="margin-top: 80px;">
        <h3>Barra de navegación fija en la parte superior e inferior</h3>
        <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>
    </div>
    <div class="navbar-expand-sm bg-dark navbar-dark fixed-bottom">
        <div class="navbar-text">
            <a href="#" target="_blank" class="nav-link small">&copy; 2018 - Company name</a>
        </div>
    </div>
</body>
</html>

Deseo disminuir la altura del navbar inferior y mi primer intento fue el siguiente:

Código HTML:

Ver original<div class="navbar-expand-sm bg-dark navbar-dark fixed-bottom" style="height: 24px;">
        <div class="navbar-text text-center">
            <a href="#" target="_blank" class="nav-link small">&copy; 2018 - Company name</a>
        </div>
    </div>

Disminuye la altura del navbar, pero el ancla no se centra.
Favor si me echan una mano.

Muchas gracias, saludos.

DragonX · #2 (**permalink**) 05/03/2018, 10:05

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<div class="fixed-footer">
      <a href="#" target="_blank">&copy; 2018 - Company name</a>
 </div>

CSS

Código CSS:

Ver original.fixed-footer{
    position: fixed;
    left:0;
    right:0;
    bottom: 0;
    background-color: #ddd;
   text-align: center;
}

Slds.-