Стрелка выпадающего Bulma не отображается - PullRequest
Новая
       7

Стрелка выпадающего Bulma не отображается

0 голосов
/ 02 ноября 2018

Я сейчас борюсь с булмой навбар. Это мой заголовок: 

 <header class="navbar">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item">
                    <span class="icon has-text-primary is-large">
                        <i class="mdi mdi-36px mdi-hexagon-multiple"></i>
                    </span>
                    <!-- <h1 class="title is-1">DNW</h1> -->
                </a>
                <span class="navbar-burger burger" data-target="navbarMenuHeroC">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </div>
            <div class="navbar-menu">
                <div class="navbar-end">
                    <a class="navbar-item">
                        Home
                    </a>
                    <a class="navbar-item">
                        Forum
                    </a>
                    <a class="navbar-item">
                        Spiele
                    </a>
                    <div class="navbar-item has-dropdown is-hoverable is-arrowless">
                        <div class="navbar-link">
                            <img class="nav-profilepic" src="https://static.wixstatic.com/media/1bfda4_6f8ae00a346644a89245f331fc6c6b8e~mv2_d_3476_5214_s_4_2.jpeg?dn=">
                            Tränenreich
                        </div>
                        <div class="navbar-dropdown">
                            <a class="navbar-item">
                                Profil
                            </a>
                            <a class="navbar-item">
                                Nachrichten
                            </a>

                            <a class="navbar-item">
                                Rangliste
                            </a>
                            <hr class="navbar-divider">
                            <a class="navbar-item">
                                Hilfe
                            </a>
                            <a class="navbar-item">
                                Einstellungen
                            </a>
                            <a class="navbar-item">
                                Mod-Forum
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

В раскрывающемся меню должна отображаться синяя стрелка. Но это не отображается ни в Chrome, ни в Firefox. Любые идеи, как это исправить? enter image description here Я ожидаю, что на выходе появится стрелка раскрывающегося списка справа рядом с «Tränenreich». Наведение работает отлично.

Привет

1 Ответ

0 голосов
/ 13 мая 2019

Ваш код в сочетании с неотредактированным файлом Bulma показывает стрелку рядом с выпадающим элементом. См. Демонстрацию ниже (возможно, вам придется видеть полную страницу, потому что навигация изменена на меню гамбургеров с планшета вниз).

Полагаю, вы либо редактировали CSS Bulma таким образом, что ломаете стрелку, либо у вас есть какой-то нестандартный CSS, который конфликтует с ним.

Стрелка создана с использованием псевдоэлемента :after. 

.navbar-link:not(.is-arrowless)::after,
.select:not(.is-multiple):not(.is-loading)::after {
    border: 3px solid transparent;
    border-radius: 2px;
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: .625em;
    margin-top: -.4375em;
    pointer-events: none;
    position: absolute;
    top: 50%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: center;
    transform-origin: center;
    width: .625em;
}

Проверьте свой пользовательский CSS, чтобы увидеть, есть ли у вас что-нибудь, что стилизует элементы :after, которые влияют на элемент nav. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<header class="navbar">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item">
                    <span class="icon has-text-primary is-large">
                        <i class="mdi mdi-36px mdi-hexagon-multiple"></i>
                    </span>
                    <!-- <h1 class="title is-1">DNW</h1> -->
                </a>
                <span class="navbar-burger burger" data-target="navbarMenuHeroC">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </div>
            <div class="navbar-menu">
                <div class="navbar-end">
                    <a class="navbar-item">
                        Home
                    </a>
                    <a class="navbar-item">
                        Forum
                    </a>
                    <a class="navbar-item">
                        Spiele
                    </a>
                    <div class="navbar-item has-dropdown is-hoverable is-arrowless">
                        <div class="navbar-link">
                            <img class="nav-profilepic" src="https://static.wixstatic.com/media/1bfda4_6f8ae00a346644a89245f331fc6c6b8e~mv2_d_3476_5214_s_4_2.jpeg?dn=">
                            Tränenreich
                        </div>
                        <div class="navbar-dropdown">
                            <a class="navbar-item">
                                Profil
                            </a>
                            <a class="navbar-item">
                                Nachrichten
                            </a>

                            <a class="navbar-item">
                                Rangliste
                            </a>
                            <hr class="navbar-divider">
                            <a class="navbar-item">
                                Hilfe
                            </a>
                            <a class="navbar-item">
                                Einstellungen
                            </a>
                            <a class="navbar-item">
                                Mod-Forum
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
...