Элементы навигационной панели не отображаются

Я пытаюсь использовать методологию БЭМ в своем приложении, поэтому я начал с навигационной панели, но у меня возникла проблема, мои элементы навигации не отображаются, а значок гамбургера отображается в настольной версии, что неверно

вот мой код.

HTML.

<nav class="main-nav">
    <div class="main-nav__logo">
      <li class="main-nav__link">
        <a>Majeni</a>
      </li>
    </div>
    <button class="main-nav__toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="main-nav__icon navbar-toggler-icon"></span>
    </button>
    <div class="main-nav__collapse collapse" id="navbarNav">
      <ul class="main-nav__list ml-auto">
        <li class="main-nav__item--active">
          <a class="main-nav__link" href="#">Home
            <span class="main-nav__current sr-only">(current)</span>
          </a>
        </li>
        <li class="main-nav__item">
          <a class="main-nav__link" href="#">About us</a>
        </li>
        <li class="main-nav__item">
          <a class="main-nav__link" href="#">What we do</a>
        </li>
        <li class="main-nav__item">
          <a class="main-nav__link " href="#">Projects</a>
        </li>
        <li class="main-nav__item">
            <a class="main-nav__link " href="#">Contact</a>
          </li>
      </ul>
    </div>
  </nav>

Вот CSS

.main-nav {
    background-color: green;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    height: 50px;
    width: 100%;
    &__item{
            padding: 0 2em;
            background-color: #088887;
            display: flex ;
            align-items: center;
        }
    &__link{
        list-style-type: none;
        list-style: none;
    }

UPDATE link is working now

Вот jsfidle Меню навигации с Bem

Что не так с моим кодом? Я просто новичок, поэтому, пожалуйста, исправьте мой код, если вы видите что-то не так, или предоставьте рабочий пример для упрощения. Благодарность

Jsfiddle не работает? ссылки на домашнюю страницу сайта jsfiddle :)

Rustyjim 10.08.2018 16:51

hii @Rustyjim я обновил ссылку jsfiddle.net/Mwanitete/rjysf257/1

The Dead Man 11.08.2018 00:23
0
2
45
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не уверен насчет БЭМ-метода, но я проверил, и если вы используете классы: "navbar-collapse", "navbar", "navbar-nav" frombootstrap изначально работает лучше.

    .main-nav {
        background-color: green;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
        height: 50px;
        width: 100%;
        &__item{
                padding: 0 2em;
                background-color: #088887;
                display: flex ;
                align-items: center;
            }
        &__link{
            list-style-type: none;
            list-style: none;
        }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<nav class="main-nav navbar navbar-expand-md">
  <div class="main-nav__logo">
    <li class="main-nav__link">
      <a>Majeni</a>
    </li>
  </div>
  <button class="main-nav__toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="main-nav__icon navbar-toggler-icon"></span>
  </button>
  <div class="main-nav__collapse collapse navbar-collapse" id="navbarNav">
    <ul class="main-nav__list ml-auto navbar-nav">
      <li class="main-nav__item--active">
        <a class="main-nav__link" href="#">Home
          <span class="main-nav__current sr-only">(current)</span>
        </a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">About us</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">What we do</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link " href="#">Projects</a>
      </li>
      <li class="main-nav__item">
          <a class="main-nav__link " href="#">Contact</a>
        </li>
    </ul>
  </div>
</nav>

Но не уверены, подходит ли это вам? Дайте мне знать (если он еще нужен)

Я решил проблему, у меня была проблема с css, ваше право с начальной загрузкой работает лучше, но я просто хотел с помощью bem вот что у меня есть сейчас. stackblitz.com/edit/bootstrap-nabar-snoyrg

The Dead Man 15.08.2018 19:27

Приятно слышать, что вы починили это сами!

Rustyjim 15.08.2018 20:57

Другие вопросы по теме