Меню гамбургера Bootstrap4 и выравнивание ссылок

Question

Как заставить пункты меню отображаться внизу, а не слева? (jsfiddle)

Мне также хотелось бы, чтобы значок гамбургера оставался на месте и не двигался, когда я щелкаю по нему.

Так он себя ведет. (GIF)

<nav class="navbar navbar-dark bg-dark navbar-expand-lg text-nowrap">
  <div class="container">
    <div class="row align-items-center">
      <div class="col col-lg-3">
        <a href="" class="navbar-brand justify-content-start">
            <h1 class="display-3" id="cont">TEST1<span id="se" class="">.SE</span></h1>
        </a>
      </div>
      <div class="col col-lg-5">
        <div class="navbar-nav">
          <div class="collapse navbar-collapse navbar1">
              <a href="#" class="nav-item nav-link"><!-- Hem -->TEST1</a>
              <a href="#" class="nav-item nav-link"><!-- Recept -->TEST2</a>
              <a href="#" class="nav-item nav-link"><!-- Arbetssökande -->TEST3</a>
              <a href="#" class="nav-item nav-link"><!-- Omdömen -->TEST4</a>
              <a href="#" class="nav-item nav-link"><!-- Hjälpmedel -->TEST5</a>
            </div>
        </div>
      </div>
      <div class="col col-lg-1"></div>
            <div class="col col-lg-3">
        <div class="navbar-nav collapse navbar-collapse navbar1">
          <a href="#" class="nav-item nav-link mx-1" id="login"><i class="fas fa-user-check mr-1"></i>Logga In</a>
            <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Registrera</a>
        </div>
      </div>
    </div>
    <button class="navbar-toggler" data-toggle="collapse" data-target=".navbar1"><span class="navbar-toggler-icon"></span></button>
  </div>
</nav>

Answer 1

Добавьте это CSS в свой код:

.navbar-toggler { 
  position: absolute;
  right: 10px;
  top: 10px;
}

вместо jsfiddle , вы можете создавать рабочие фрагменты внутри stackoverflow , как и следующий фрагмент ниже:

body {
  background: #e6ffe6;
  color: gray;
  font-family: Nunito;
}

.navbar-brand h1 {
  font-weight: 100;
  font-size: 2rem;
  margin: 0, 24px;
}

#se {
  color: gray;
}

#cont {
  margin-bottom: 0px;
}

.navbar-toggler {
  position: absolute;
  right: 10px;
  top: 12px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/38a8bb4287.js" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark bg-dark navbar-expand-lg text-nowrap">
  <div class="container">
    <div class="row align-items-center">

      <!-- TITLE -->

      <div class="col col-lg-3">
        <a href="" class="navbar-brand justify-content-start">
          <h1 class="display-3" id="cont">TEST1<span id="se" class="">.SE</span></h1>
        </a>
      </div>
      <!-- NAVIGATION-->

      <div class="col col-lg-5">
        <div class="navbar-nav">
          <div class="collapse navbar-collapse navbar1">
            <a href="#" class="nav-item nav-link">
              <!-- Hem -->TEST1</a>
            <a href="#" class="nav-item nav-link">
              <!-- Recept -->TEST2</a>
            <a href="#" class="nav-item nav-link">
              <!-- Arbetssökande -->TEST3</a>
            <a href="#" class="nav-item nav-link">
              <!-- Omdömen -->TEST4</a>
            <a href="#" class="nav-item nav-link">
              <!-- Hjälpmedel -->TEST5</a>
          </div>
        </div>
      </div>

      <!-- SPACER -->

      <div class="col col-lg-1"></div>

      <!-- LOGIN -->


      <div class="col col-lg-3">
        <div class="navbar-nav collapse navbar-collapse navbar1">
          <a href="#" class="nav-item nav-link mx-1" id="login"><i class="fas fa-user-check mr-1"></i>Logga In</a>
          <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Registrera</a>

        </div>

      </div>
    </div>


    <!-- DROPDOWN -->
    <button class="navbar-toggler" data-toggle="collapse" data-target=".navbar1"><span class="navbar-toggler-icon"></span></button>
  </div>



</nav>

<!-- CONTENT -->

<div class="container bg-light text-dark text-center pt-5">
  <h1 class="display-1 p-3">Lorem ipsum dolor sit amet.</h1>
  <p class="display-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse incidunt hic odio eveniet eos, consequuntur vel aperiam commodi placeat nemo eum dicta maiores quas vero odit error enim deleniti voluptatum pariatur necessitatibus, ipsam sequi, sunt
    excepturi. Similique, culpa, expedita omnis dolores aspernatur molestias consequatur saepe veritatis ea reprehenderit velit nulla inventore quam alias provident voluptatem repellendus, soluta vel ad tempora nihil atque magni a? Quibusdam, quo adipisci
    accusamus numquam error vitae animi sequi deserunt maxime aspernatur eaque mollitia ex praesentium nostrum atque dignissimos ea, asperiores laborum illo consequuntur. Provident molestias mollitia quis hic inventore. Pariatur, dolore tempore excepturi?
    Voluptatem! ipsum dolor sit amet, consectetur adipisicing elit. Ex, labore at ullam. Eaque nesciunt labore excepturi eum error, ratione, deleniti voluptatibus ex aspernatur nisi nobis magni saepe adipisci, fugit eius optio voluptatem vel itaque illum
    omnis molestias! Beatae consectetur, nulla?</p>

</div>





<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>