Bulma CSS положение кнопки бургера сломано? - PullRequest
Новая
       34

Bulma CSS положение кнопки бургера сломано?

1 голос
/ 25 мая 2020

Burger position

Я создаю веб-сайт с помощью Meteor + Blaze + Bulma. Я в основном создал меню навигации и заставил кнопку бургера работать для небольших устройств. Но проблема в том, что кнопка бургера неправильно расположена.

Я бы хотел, чтобы он был крайним справа и выровнен по вертикали с lo go. Но бургер находится прямо рядом с lo go и тоже немного ниже. Я пробовал "position: absolute; right: 0;" но он продолжает отскакивать.

Bulma не подходит для использования с Blaze и Meteor? Других файлов CSS у меня пока нет, я просто добавил Bulma в теги заголовков. Так в чем может быть проблема? 

<template name="navigation">
   <nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
       <div class="container">
           <!-- Logo/Home -->
           <div class="navbar-brand">
               <a class="" href="{{pathFor route='Home'}}">
                    <img src="logo.svg" width="200" height="29" />
               </a>

           <!-- Burger Menu Button -->
           <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
           </a>
        </div>

        <!-- Navigation Conent -->
        <div id="navlist" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" href="{{pathFor route='1'}}">
                1
                </a>
                <a class="navbar-item" href="{{pathFor route='2'}}">
                2
                </a>
                <a class="navbar-item" href="{{pathFor route='3'}}">
                3
                </a>
                <a class="navbar-item" href="{{pathFor route='4'}}">
                4
                </a>
                <a class="navbar-item" href="{{pathFor route='5'}}">
                5
                </a>
            </div>

            <!-- Navbar social -->
            <div class="navbar-end">
                <a class="navbar-item icon is-large" href="https://www.meetup.com/...">
                    <i class="fab fa-lg fa-meetup"></i>
                </a>
                <a class="navbar-item icon is-large" href="https://www.facebook.com/...">
                    <i class="fab fa-lg fa-facebook"></i>
                </a>
                <a class="navbar-item icon is-large" href="https://www.youtube.com/...">
                    <i class="fab fa-lg fa-youtube"></i>
                </a>
            </div>
        </div>
    </div>
</nav>

1 Ответ

1 голос
/ 26 мая 2020

Вам нужно добавить класс navbar-item в контейнер вашего lo go вот так: 

<div class="navbar-brand">
    <a class="navbar-item" href="{{pathFor route='Home'}}">  <!-- Adding the class navbar-item -->
        <img src="logo.svg" width="200" height="29" />
    </a>

    <!-- Burger Menu Button -->
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navlist">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
    </a>
</div>

Результат в моем собственном проекте:

Без navbar-item:

without navbar-item

С navbar-item:

with navbar-item

...