Search code examples
cssbulma

Bulma CSS burger button position broken?

Burger position

I am implementing a website with Meteor + Blaze + Bulma. I've basically created a navigation menu and got the burger button working for small devices. But the problem is, that the position of the burger button is messed up.

I would like to have it on the far right and vertically aligned with the logo. But the burger is right next to the logo and also slightly lower. I've tried "position: absolute; right:0;" but it keeps jumping back.

Is Bulma not suited for use with Blaze and Meteor? I have no other CSS files so far and just added Bulma in the header tags. So what could be the issue?

<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>

Solution

  • You need to add the class navbar-item to the container of your logo like that :

    <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>

    Result on my own project :

    Without navbar-item :

    without navbar-item

    With navbar-item :

    with navbar-item