Could you elaborate on how to set width?

[peyo]

Hi Negomi,

Thanks for building the react-burger-menu!

Could you elaborate on how to set the width?

I see that this is how one would set width: <Menu width={ '20%' } />

My codebase looks something like this:

<Menu right>
    <Nav.Link href="www.linkedinlink.com" target="_blank" rel="noopener noreferrer">
        <div className="header__navLink">
            linkedin
        </div>
    </Nav.Link>
    <Nav.Link href="www.githublink.com" target="_blank" rel="noopener noreferrer">
        <div className="header__navLink">
            github
        </div>
    </Nav.Link>
    <Nav.Link href="www.leetcodelink.com" target="_blank" rel="noopener noreferrer">
        <div className="header__navLink">
            leetcode
        </div>
    </Nav.Link>
    <Nav.Link href="www.resumelink.com" target="_blank" rel="noopener noreferrer">
        <div className="header__navLink">
            resume
        </div>
    </Nav.Link>
</Menu>

I tried adding width inside <Menu right>, but it does not work. I also tried playing around with the page wrapper and outer container, but that didn't work either.

Thanks, Peter

[negomi]

Hey @peyo,

Do you mean it's just not changing the width at all?

I just tested on the demo site and was able to change the width with that prop:

If it's just visually not what you expect, could there be something else going on with your layout?

[peyo]

That's interesting. I can change it through inspect > elements. But the width won't change through CSS.

Should this work?

.bm-menu-wrap {
  position: fixed;
  width: 30%;
  height: 100%;
}

[negomi]

You should change it using the prop rather than CSS. So your example above would look like this:

<Menu width={'30%'} right>
    <Nav.Link href="www.linkedinlink.com" target="_blank" rel="noopener noreferrer">
        <div className="header__navLink">
            linkedin
        </div>
    </Nav.Link>
    <Nav.Link href="www.githublink.com" target="_blank" rel="noopener noreferrer">
        <div className="header__navLink">
            github
        </div>
    </Nav.Link>
    <Nav.Link href="www.leetcodelink.com" target="_blank" rel="noopener noreferrer">
        <div className="header__navLink">
            leetcode
        </div>
    </Nav.Link>
    <Nav.Link href="www.resumelink.com" target="_blank" rel="noopener noreferrer">
        <div className="header__navLink">
            resume
        </div>
    </Nav.Link>
</Menu>

[peyo]

I see. That works. Thanks!

That's interesting. There must've been some sort of syntax issue with the way I was writing the prop earlier.

[negomi]

Awesome, glad it's working! 😄