0

Sucede que quiero agregar una miniatura de perfil a una lado de un dropdown navbar en bootstrap. Ya he intentado agragarla como imagen pero solo funciona si cambio su tamaño a 20px*20px, Necesito que sea 40px*40px sin alterar el tamaño del navbar

Navbar sin imagen de perfil

El efecto que quiero lograr es parecido al de twitter incluso con el border radius.

Twitter

/*MODIFICA EL NAVBAR*/

.navbar-default {
  background-color: #f4f4f4;
  border: none;
  /* border-color: #dfdfdf; */
}

.navbar-default .navbar-brand {
  color: #5355bf;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #38397f;
  background-color: #DFDFDF;
  /*
    aquí se modifica el hover del brand
  */
}

.navbar-default .navbar-text {
  color: #5355bf;
}

.navbar-default .navbar-nav>li>a {
  color: #5355bf;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #38397f;
  background-color: #DFDFDF;
}

.navbar-default .navbar-nav>li>.dropdown-menu {
  background-color: #f4f4f4;
}

.navbar-default .navbar-nav>li>.dropdown-menu>li>a {
  color: #5355bf;
}

.navbar-default .navbar-nav>li>.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>.dropdown-menu>li>a:focus {
  color: #38397f;
  background-color: #dfdfdf;
}

.navbar-default .navbar-nav>li>.dropdown-menu>li.divider {
  background-color: #dfdfdf;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #38397f;
  background-color: #dfdfdf;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  color: #38397f;
  background-color: #dfdfdf;
}

.navbar-default .navbar-toggle {
  border-color: #dfdfdf;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #dfdfdf;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #5355bf;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #5355bf;
}

.navbar-default .navbar-link {
  color: #5355bf;
}

.navbar-default .navbar-link:hover {
  color: #38397f;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #5355bf;
  }
  .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #38397f;
  }
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
    color: #38397f;
    background-color: #dfdfdf;
  }
}


/*MODIFICA LOS BADGES*/

.badge {
  background-color: #5355bf;
}
<script src="https://use.fontawesome.com/463aacdde3.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LaKill - Inicio</title>
  <link href="../css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="#">
          <i class="fa fa-gamepad" aria-hidden="true">
          &nbsp;
        </i>
          <!-- <img alt="Brand" src="..."> Poner imagen del logo-->
          LOGO
        </a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#" class="efectito"><i class="fa fa-flag" aria-hidden="true">&nbsp;</i>ENLACE</a></li>
          <li><a href="#" class="efectito"><i class="fa fa-shield" aria-hidden="true">&nbsp;</i>ENLACE</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#"><i class="fa fa-bell" aria-hidden="true">&nbsp;</i><span class="badge">4</span></a></li>
          <li>
            <a href="#"><i class="fa fa-envelope" aria-hidden="true">&nbsp;</i><span class="badge">2</span></a></li>
          <li class="dropdown">

            <a href="#" class="dropdown-toggle negrita" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            Crixodia
          </a>
            <!-- <span class="caret"></span> Agrega un indicador de flecha abajo -->
            <ul class="dropdown-menu">
              <li><a href="#"><i class="fa fa-user" aria-hidden="true">&nbsp;</i>Perfil</a></li>
              <li><a href="#"><i class="fa fa-cog" aria-hidden="true">&nbsp;</i>Cuenta</a></li>
              <li><a href="#"><i class="fa fa-question-circle" aria-hidden="true">&nbsp;</i>Soporte</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#"><i class="fa fa-sign-out" aria-hidden="true">&nbsp;</i>Cerrar Sesión</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

1 respuesta 1

0

Bueno no usado mucho bootstrap 3, pero espero que mi código te ayude.

/*MODIFICA EL NAVBAR*/

.navbar-default {
  background-color: #f4f4f4;
  border: none;
  /* border-color: #dfdfdf; */
}

.navbar-default .navbar-brand {
  color: #5355bf;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #38397f;
  background-color: #DFDFDF;
  /*
    aquí se modifica el hover del brand
  */
}

.navbar-default .navbar-text {
  color: #5355bf;
}

.navbar-default .navbar-nav>li>a {
  color: #5355bf;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #38397f;
  background-color: #DFDFDF;
}

.navbar-default .navbar-nav>li>.dropdown-menu {
  background-color: #f4f4f4;
}

.navbar-default .navbar-nav>li>.dropdown-menu>li>a {
  color: #5355bf;
}

.navbar-default .navbar-nav>li>.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>.dropdown-menu>li>a:focus {
  color: #38397f;
  background-color: #dfdfdf;
}

.navbar-default .navbar-nav>li>.dropdown-menu>li.divider {
  background-color: #dfdfdf;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #38397f;
  background-color: #dfdfdf;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  color: #38397f;
  background-color: #dfdfdf;
}

.navbar-default .navbar-toggle {
  border-color: #dfdfdf;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #dfdfdf;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #5355bf;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #5355bf;
}

.navbar-default .navbar-link {
  color: #5355bf;
}

.navbar-default .navbar-link:hover {
  color: #38397f;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #5355bf;
  }
  .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #38397f;
  }
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
    color: #38397f;
    background-color: #dfdfdf;
  }
}


/*MODIFICA LOS BADGES*/

.badge {
  background-color: #5355bf;
}

/* Encuadrando imagen a 40px */
.navbar-brand{
  position: relative;
}
.navbar-brand img{
    position: absolute;
    top: 5px;
    left: 45px;
}
<script src="https://use.fontawesome.com/463aacdde3.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LaKill - Inicio</title>
  <link href="../css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="#">
          <i class="fa fa-gamepad" aria-hidden="true">
          &nbsp;
        </i>
         <img alt="Brand" src="https://cdn6.aptoide.com/imgs/f/e/c/fec372f7c957ad5393911379e3a7c2a8_icon.png?w=40">
        </a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#" class="efectito"><i class="fa fa-flag" aria-hidden="true">&nbsp;</i>ENLACE</a></li>
          <li><a href="#" class="efectito"><i class="fa fa-shield" aria-hidden="true">&nbsp;</i>ENLACE</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#"><i class="fa fa-bell" aria-hidden="true">&nbsp;</i><span class="badge">4</span></a></li>
          <li>
            <a href="#"><i class="fa fa-envelope" aria-hidden="true">&nbsp;</i><span class="badge">2</span></a></li>
          <li class="dropdown">

            <a href="#" class="dropdown-toggle negrita" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            Crixodia
          </a>
            <!-- <span class="caret"></span> Agrega un indicador de flecha abajo -->
            <ul class="dropdown-menu">
              <li><a href="#"><i class="fa fa-user" aria-hidden="true">&nbsp;</i>Perfil</a></li>
              <li><a href="#"><i class="fa fa-cog" aria-hidden="true">&nbsp;</i>Cuenta</a></li>
              <li><a href="#"><i class="fa fa-question-circle" aria-hidden="true">&nbsp;</i>Soporte</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#"><i class="fa fa-sign-out" aria-hidden="true">&nbsp;</i>Cerrar Sesión</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

1
  • Excelente, muchas gracias me sirvió de mucho :D el 29 ago. 2017 a las 1:34

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.