0

Buenas, estoy intentando crear este nav y quiero que mi logo se quede en la izquierda, y los enlaces caigan a la derecha, pero soy novato y no encuentro nada. Podéis ayudarme? Gracias

<nav class="navbar navbar-expand-md menu">

  <a class="navbar-brand" href="index.html">
    <img src="img/logo_cabecera.jpg" alt="Checan | Educación canina">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerMenu" aria-controls="navbarTogglerMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerMenu">
  <ul class="nav navbar-nav">
     <li class="nav-item active">
       <a class="nav-link" href="#">Home<span class="sr-only">
         (current)</span></a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Disabled</a>
     </li>
     </ul>
  </div>
</nav>
2
  • Bienvenido al sitio Marcos!, te invito a realizar el recorrido de bienvenida para conocer el funcionamiento básico del sitio. Con respecto a la realización de preguntas que estas sean bien recibidas por la comunidad y obtengas excelentes respuestas, es muy importante leer Cómo preguntar en base a este documento modifica tu pregunta, es recomendable agregar lo que has intentado, saludos!
    – Jorgesys
    Commented el 18 ene. 2018 a las 19:01
  • la última, me la descargué ayer.
    – Marcos PG
    Commented el 19 ene. 2018 a las 7:05

1 respuesta 1

1

Veo que utilizas la version 4 de Bootstrap, puedes agregarle un ml-auto a tu navbar-nav

<nav class="navbar navbar-expand-md menu">

  <a class="navbar-brand" href="index.html">
    <img src="img/logo_cabecera.jpg" alt="Checan | Educación canina">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerMenu" aria-controls="navbarTogglerMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerMenu">
  <ul class="nav navbar-nav ml-auto"> <-- Aquí ponemos ml-auto
     <li class="nav-item active">
       <a class="nav-link" href="#">Home<span class="sr-only">
     (current)</span></a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Disabled</a>
     </li>
     </ul>
  </div>
</nav>

Puedes ver un ejemplo funcional aquí

1
  • Gracias por la respuesta. En el ejemplo funcional de esta página sí que me sale a la derecha, pero cuando lo pongo en mi código, me sale a la izquierda. No lo entiendo la verdad.
    – Marcos PG
    Commented el 19 ene. 2018 a las 7:03

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.