[Vuejs]-Navbar transparent in buefy

by

4👍

buefy navbar API:

https://buefy.org/documentation/navbar/#api-view

Passing this props:

<b-navbar :fixed-top="true"  :transparent="true" >

Vue docs – components props (recommend to read):

transparent "bug":

Open github issue:
BUG: navbar is-transparent not working .

IMPORTANT: transparent affect navbar items (Not the navbar wrapper himself).

Remove any hover or active background from the navbar items

So add simple CSS styling:

nav.navbar.is-fixed-top {
  background: transparent;
}

body top padding issue

I won’t find a way to remove body top padding. I added this style:

body{
  padding-top: 0px!important;
}

Basic example:

const app = new Vue()
app.$mount('#app')
img.responsive_img{
  width: 100%;
  height: auto;
}
body{
  padding-top: 0px!important;
}

/* change navbar background color */
nav.navbar.is-fixed-top {
  background: transparent;
}
<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet"/>

<div id="app">
    <b-navbar class="is-link" :fixed-top="true"  :transparent="true">
        <template slot="brand">
            <b-navbar-item tag="router-link" :to="{ path: '/' }">
                <img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
                >
            </b-navbar-item>
        </template>
        <template slot="start">
            <b-navbar-item  href="#">
                Home
            </b-navbar-item>
            <b-navbar-item href="#">
                Documentation
            </b-navbar-item>
            <b-navbar-dropdown label="Info">
                <b-navbar-item href="#">
About
                </b-navbar-item>
                <b-navbar-item href="#">
Contact
                </b-navbar-item>
            </b-navbar-dropdown>
        </template>

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

    <header style="min-height: 200vh;">
      <img class="responsive_img" src="https://picsum.photos/2000/600"/> 
  </header>
</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

Change navbar background color on scroll

only by custom code

See this codepen (I added a class on scroll):
https://codepen.io/ezra_siton/pen/jOPZgmR

Change the background color on scroll her:

nav.navbar.is-fixed-top.isActive{
  transition: background-color 0.5s ease;
  background: red; /* change color on scroll */
}

Change navbar links color to white (For dark hero) – add "is-link" modifier:
https://bulma.io/documentation/components/navbar/#colors

 <b-navbar  class="is-link" :fixed-top="true"  :transparent="true" >

Remove hover/active

:transparent="true"
Remove any hover or active background from the navbar items.

👤Ezra Siton

Leave a comment