Элемент выпадающего меню Navbar перемещается при нажатии на него - PullRequest
Новая
       6

Элемент выпадающего меню Navbar перемещается при нажатии на него

0 голосов
/ 03 марта 2020

Я пытаюсь настроить панель навигации, содержащую несколько элементов, выровненных по правому краю.

Проблема в том, что когда я нажимаю на значок "уведомления", у меня отображается раскрывающийся список, но мои значки двигайтесь по навигационной панели вместо того, чтобы оставаться на месте, я не понимаю, почему

Это мой код:

HTML: 

<nav class="navbar navbar-expand-lg navbar-dark bg-secondary justify-content-end">
  <ul class="navbar-nav menu-right">
    <div class="child child-right">    

      <!-- Parameters item -->
      <li class="nav-item">
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-cog"></i>
          <span class="badge-sonar"></span>
        </a>
        <div class="dropdown-menu parametres" aria-labelledby="dropdownMenuMessage">
          <a class="dropdown-item" href="#">My profile</a>
          <a class="dropdown-item" href="#">Help</a>
          <a class="dropdown-item" href="#">Setting</a>
        </div>
      </li>

      <!-- Notifications item -->
      <li class="nav-item">
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-bell"></i>
        </a>
        <div class="dropdown-menu notifications" aria-labelledby="dropdownMenuMessage">
          <div class="notifications-header">
            <i class="fa fa-bell"></i>
            Notifications
          </div>

          <!-- Notification content -->
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">
            <div class="notification-content">
              <div class="icon">
                <i class="fas fa-check text-success border border-success"></i>
              </div>
              <div class="content">
                <div class="notification-detail">Lorem ipsum dolor sit amet consectetur adipisicing
                  elit. In totam explicabo</div>
                <div class="notification-time">
                  6 minutes ago
                </div>
              </div>
            </div>
          </a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item text-center" href="#">View all notifications</a>
        </div>

      </li>
    </div>

  </ul>
</nav>

SASS: 

.navbar {
    overflow: visible;
    height: 56px;
    z-index: 9999;
}

.notifications {

    max-width: 250px;
    margin-left: -200px;
    margin-top: 5px;


    .dropdown-item {
        padding: .25rem 1rem;
    }

    .notifications-header {
        padding: 0 1rem;
    }

    .notification-content {
        display: flex;

        .icon {
            width: 40px;
            height: 40px;

            i {
                width: 35px;
                height: 35px;
                text-align: center;
                line-height: 35px;
            }
        }

        .content {
            line-height: 1.6;
            padding-left: 5px;
            width: calc(100% - 40px);

            .notification-time {
                font-size: .7rem;
                color: #828282;
            }

            .notification-detail {
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.child {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 0;
    justify-content: flex-start;
    align-items: stretch;
}

.child.child-right {
    flex-grow: 1;
    justify-content: flex-end;
}

.child>li{
    padding-right: 50px;
}

И jsfiddle: https://jsfiddle.net/kiuega/beat2zmn/11/ Может кто-нибудь помочь мне, пожалуйста?

Ответы [ 3 ]

2 голосов
/ 03 марта 2020

Стили переопределяются на navbar.scss, например, выпадающий список имеет статус c pos вместо абсолютного, поэтому вот решение

Добавьте эти стили в свою таблицу стилей 

.child > li {
  padding-right: 50px;
  position: relative;
}
.navbar-nav .dropdown-menu {
    position: absolute;
    float: none;
}
1 голос
/ 03 марта 2020

Если вы откроете devtools в своем браузере, то на выпадающей панели вы увидите следующие классы: .navbar-nav .dropdown-menu

(перезаписано navbar.s css)

Если вы удалите позицию ': stati c', то она будет работать как положено.

И поиграйте с верхним и левым свойствами, чтобы получить правильная позиция.

1 голос
/ 03 марта 2020

проверьте поля и отступы (в дочернем элементе), проверьте с помощью элемента inspect и посмотрите, как элемент witch меняет свою позицию

...