FAQ

Welcome to the vue-burger-menu wiki!

---

1) How to customise icon position for small screen (mobile)? Detail question

For easy solution you can set position with respect to media screen size like

@media screen and (max-width: 40em) { .bm-burger-button { left: 6px; top: 6px; } }

I have tried it. Now, it looks better. (https://codesandbox.io/s/n3m0zx1zwp) In App.vue

Or hide it for non zero window position or unhide it for a while if currentY position decrease on onscroll event.(means scroll UP)

2) What would you recommend the best way is to override or change the css?

you can simply try by adding style to your component in which you are importing "vue-burger-menu". Or you can try adding style in mounted function. If this not works for you, open an issue.

3) Is vue-burger-menu SSR friendly(supported to Nuxt.js)?

To use it in with Nuxt, use it as a plugin with no SSR

plugins/slide-menu.js

import Vue from 'vue'
import { Slide } from 'vue-burger-menu'
import { ScaleDown } from 'vue-burger-menu'
import { ScaleRotate } from 'vue-burger-menu'
import { Reveal } from 'vue-burger-menu'
import { Push } from 'vue-burger-menu'
import { PushRotate } from 'vue-burger-menu'
Vue.component('SlideMenu', Slide)
Vue.component('ScaleDownMenu', ScaleDown)
Vue.component('ScaleRotateMenu', ScaleRotate)
Vue.component('RevealMenu', Reveal)
Vue.component('PushMenu', Push)
Vue.component('PushRotateMenu', PushRotate)

nuxt.config.js

plugins: [ { src: '~plugins//slide-menu', ssr: false }]

index.vue

 Slide
    a#home(href="#")
      span Home
 no-ssr
   div#page-wrap
    ...

4) Is there anyway to open and close the drawer programatically?

For example, in case we need to use another button or link instead of the built-in hamburger menu?