Implementing the menu

[Fepoide]

I am new with front end dev, just got graduate and did a course with react

if I understood it right, I need to implement this " import { bubble as Menu } from 'react-burger-menu'

class Example extends React.Component { showSettings (event) { event.preventDefault();

}

render () { return (

Home About Contact Settings

);

} }

"

as a new component, (i choosed bubblebtw) but the way I am doing it, the whole page is the button that triggers the menu, there is no side button (i tried to check the other FAQ where teachs to use ISOPEN also with no success) can someone helps me out on how to implement this?

thanks in advanced and sorry about the begginer experience =/

[TylerBarnes]

I'm having the same issue. The docs aren't very clear on this. Under animation it states "The example above imported slide which renders a menu that slides in on the page when the burger icon is clicked." but nowhere in the example code is there reference to a burger icon. There doesn't seem to be a burger icon generated by the component either.

[TylerBarnes]

Figured it out..

You need to scroll down to https://github.com/negomi/react-burger-menu#styling and manually copy / paste that css into the global css space.

If using some kind of scoped css you need to inject that css into a div that's wrapped around the Menu component.

[TylerBarnes]

If you're not using a css reset you also need this css

.bm-menu-wrap,
.bm-overlay {
  top: 0;
  left: 0;
}

[Fepoide]

Thanks a lot, that helped, but the problem is that now I have a scroll bar in the middle of it kk, take a look

[cid:2cc60ae4-db2c-4a79-a3cf-105b9fb3b1d1]

but since the menu os now workin, I think this scrool bar tomorrow I would be able to figure it out

once again, thanks

---

                    Hemerson Mendes
  Tel:

(19) 982-894-300 (CLARO)

(19) 3713-8915 (Fixo)

E-mail:

Redes Sociais:

Hotmailmailto:hmendes.88@hotmail.com?Subject= Yahoomailto:hmendes_88@yahoo.com.br?Subject= Gmailmailto:mendesh.88@gmail.com?Subject=

Facebookhttp://www.facebook.com/Mendes.Hemerson Linkedinhttp://br.linkedin.com/pub/hemerson-mendes/4b/154/328

Believe in what you do, do what you believe (Rotary Motto 93/94)

---

De: Tyler Barnes notifications@github.com Enviado: segunda-feira, 20 de agosto de 2018 21:21:26 Para: negomi/react-burger-menu Cc: Fepoide; Author Assunto: Re: [negomi/react-burger-menu] Implementing the menu (#265)

If you're not using a css reset you also need this css

.bm-menu-wrap, .bm-overlay { top: 0; left: 0; }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/negomi/react-burger-menu/issues/265#issuecomment-414506685, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AokmdDu37E64B31veCpaM87NQIFXqSyIks5uS1KGgaJpZM4WD7sS.

[negomi]

Hi both, glad you found the styling docs.

@Fepoide I can't see your example, but your scroll bar issue is almost certainly related to layout or styling too. If you can't figure it out, the easiest way to get help is to push a small example of your code up to a repo so I can run it and see what's going on.

[Fepoide]

I just replied to the e-mail the first time hehe

but I removed the padding from " / Wrapper for item list / .bm-item-list { color: #b8b7ad; padding: 0.8em; } " and the vertical scrollbar was gone

thanks evryone for the help

[TylerBarnes]

The scrollbars probably appeared because @negomi may have had box-sizing: border-box; applied to everything via a CSS reset.

Anyway, thanks for the awesome repo @negomi, this simplifies this aspect of building a site a lot!