Как вместить кнопку-бургер в шапку?

Question

[Александр Прощенков]

Есть бутстрап шапка, кнопка меню при 760px и меньше ширины дисплея переносится на новую строку, как сделать, чтобы она оставалась вместе с лого на одной строке?
index:

<div class="container">

    <div id="sidebar" class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white box-shadow border-bottom">
      <a class="text-dark" href="{% url 'index' %}"><h4 class="my-0 mr-md-auto font-weight-normal">#ЕШЬУДОБНО</<h4></a></h4>
      <button class="hamburger">&#9776;</button>
      <button class="cross">&#9776;</button>
      <div class="sidebar">
        <nav class="my-2 my-md-0 mr-md-3">
          <a class="p-2 text-dark" href="{% url 'index' %}">Главная страница</a>
          <a class="p-2 text-dark" href="{% url 'class' %}">Статистика</a>
          <a class="p-2 text-dark" href="{% url 'writeindex' %}">Сделать запись</a>
          <a class="p-2 text-dark" href="{% url 'faq'%}">Чаво</a>
        
          <a class="p-2 text-dark" href="{% url 'account'%}">Аккаунт</a>
          <a href="{% url 'login' %}" class="btn btn-outline-primary">Войти</a>
        </nav>
      </div>
    </div>
    <div class="menu">
      <ul>
        <a class="text-dark" href="{% url 'index' %}"><li>Главная страница</li></a>
        <a class="text-dark" href="{% url 'class' %}"><li>Статистика</li></a>
        <a class="text-dark" href="{% url 'writeindex' %}"><li>Сделать запись</li></a>
        <a class="text-dark" href="{% url 'faq'%}"><li>Чаво</li></a>
        <a class="text-dark" href="{% url 'account'%}"><li>Аккаунт</li></a>
        <a href="{% url 'login' %}" class="btn btn-outline-primary">Войти</a>
      </ul>
    </div>
</div>

style:

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hamburger{
  background:none;
  top:0;
  right:0;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  top:0px;
  right:0;
  padding:0px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; 
  width:100%;
  padding-left: 5%;
  padding-bottom: 5%;
  padding-top: 1%;
}
.menu ul {margin: 0; 
  padding: 0; 
  list-style-type: none; 
  list-style-image: none;
}
.menu li {display: block;   
  padding:5px 0 15px 0;
}

.menu ul li a { text-decoration: none; 
 margin: 0px; 
}
.menu ul a li:hover {  color: #666; 
  text-decoration:underline;
}
.menu a{text-decoration:none; 
  color:#666;
}
.menu a:hover{text-decoration:none; 
  color:#666;
}

@media screen and (min-width: 993px){
  .hamburger {display: none;}
  .cross {display: none;}
  .menu {display: none;}
}

@media screen and (max-width: 992px){
  .sidebar {display: none;}
}

вот так смещается:

Comments

[ProjectSoft]

Для начало прогоните вёрстку через валидатор.
Если в nav > a - это ещё норм, то ul > a - это ни в какие ворота.
.mr-md-auto, .my-0 - если вы логично называете классы, что есть хорошо, то код вы не весь предоставили.
И да. За глаза одного меню хватит. Дублирование просто лишнее.
Попробуйте воссоздать проблему на jsfiddle.net или jsfiddle.net

Answer 1

[Александр Кульнёв]

bootstrap-4.ru/docs/4.1/components/navbar