Alignment within nav

Question

Alignment within nav

Navigation

#1 by (1 votes)

0

Hi, I'm trying to create this nav and I want my logo to stay on the left, and the links fall to the right, but I'm a novice and I can not find anything. Can you help me? Thanks

<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>

css bootstrap nav

asked by Marcos PG 18.01.2018 в 19:52

source

1 answer

Paginacion in RecyclerView Android Java ASP.NET Response.Redirect does not work

score 1 · Accepted Answer

I see that you use version 4 of Bootstrap, you can add a ml-auto to your 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>

You can see a functional example here