Not able to overwrite the inline style of bm-overlay or bm-menu-wrap

I found no way to overwrite the inline style of bm-overlay or bm-menu-wrap.

I have a page like below.

I put the burger menu in the header which has a fixed width and is located in the center.

<div id="outer-container">
  <div id="page-wrap">
     <div id="header">
          <Menu pageWrapId={"page-wrap"} outerContainerId={"outer-container"}  >
              <a id="home" className="menu-item" href="/">Home</a>
              <a id="about" className="menu-item" href="/about">About</a>
              <a id="contact" className="menu-item" href="/contact">Contact</a>
              <a className="menu-item--small" href="">Settings</a>
            </Menu>
     </div>   
     <div id="content">
     </div>   
  </div>   
</div> 

It shows the menu as below even IsOpen property is false.

I think it happend because of the transform: translate3d(-100%, 0px, 0px) of bm-menu-wrap.

If I move Menu out of header DIV then it works. but the hurger icon will be out of header as well.

I am thinking to overwrite the bm-burger-button but it is hard to make it look like it’s in header div.

And I am not able to overwrite the translate3d of bm-menu-wrap from CSS as well.

How do I fix it? Am I missing something? Thanks.

[negomi]

Hmm ok. If you wanted to link me your code somewhere I can run it, I’m happy to take a look at why this is necessary. I think there’s probably a simpler way to get around this, but glad you found a solution for now 😃

[nikkiczx]

I found another way around this. I changed the value of the translate3d inside baseStyles.js from -100% to -110% in the menuWrap function. Just sharing…