search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.04k stars 582 forks source link

burger icon doesn't stay in position #383

Closed TOcvfan closed 4 years ago

TOcvfan commented 4 years ago

I can't get the burger icon to stay in the top left corner and it's on top of my app, meaning that it covers my text burgerIconProblem

I managed to to move my app to the right with .margin{ display: flex; margin-top: 75px; margin-bottom: 25px; margin: 0 auto; width: 90%; } and

<main id="page-wrap">
     <div className='margin'>
          <Route path={'/'} exact component={Home} />
          <Route path={'/login'} component={Login} />
     </div>
</main>

but I cant get the text below the icon, what do I do?

negomi commented 4 years ago

Hi @TOcvfan,

Are you using the example styles for the menu? They have position: fixed; for the burger icon which is why it covers your text. If you don't want the icon fixed positioned, you can remove that style.

If you do want it fixed, but want your text below the icon, you'd have to add more margin or padding to the top of your .margin element.

Hope that helps.

TOcvfan commented 4 years ago

okay I remowed the positin: fixed; and now it looks like this: burgerIconProblem

and i added these lines to .margin

margin-left: 25px;
margin-right: auto;

but it didn't work

negomi commented 4 years ago

You need to add width to the burger icon as well.

And then something like padding-top: 50px to .margin.

I would recommend adjusting your styles in the browser developer tools until you find a combination that works for you.