CODEWITHSUNDEEP
vue.jsbulma
Adhik Mulat
Adhik Mulat

Reputation: 538

Navbar Burger bulma not showing correctly using bulma vue

i using bulma and add Navbar , but if i have problem , if this page going to mobile view , this navbar not showing correctly . this is like on this picture link . i dont know what happen , on this bulma.io if i going to mobile view its showing correctly . this is my navbar 

    <template>

   <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
      <a class="navbar-item">

      <router-link to="/"><img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"> 
 </router-link>
    </a>

    <div class="navbar-burger" @click="showNav = !showNav" :class="{ 'is-active': showNav }">

      <span></span>
      <span></span>
      <span></span>

    </div>
    </div>

     <div class="navbar-menu" :class="{ 'is-active': showNav }">
      <div class="navbar-start">
      <a class="navbar-item">
       <router-link to="/">Home</router-link>
      </a>

      <a class="navbar-item">
        <router-link to="/about">About</router-link>
      </a>

    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

</template>

<script>
    export default {
          data: function() {
        return {
            showNav: false
        }
      }
    }
</script>

i think this is not have fault but my view on browser didnt show correctly like this picture . someone can help ?

Upvotes: 1

Views: 446

Answers (1)

Adhik Mulat
Adhik Mulat

Reputation: 538

this is solved . i not use html:5 on my template so its make a error

Upvotes: 1

Related Questions