How to fix the position of a header independent of the screen size?

Question

Basically I’m building a burger menu and the same has this blue bar as shown on the screen below:

But the more I press this screen, the smaller the size of this bar, which ends up hiding the button:

Squeezing harder

Is there any way to make the CSS of this element not let it do this?

I have the `Menu.js component

East with:

const contentHeader = (
      <div id="headerBlock">
        {!this.state.docked && (
          <button
            variant="outline-primary"
            onClick={this.menuButtonClick}
            href="#"
            style={styles.contentHeaderMenuLink}
            className="buttonMenu"
          >
            <i class="material-icons">menu</i>
          </button>
        )}
      </div>
    );

     return (
       <Sidebar {...sidebarProps}>
         <MaterialTitlePanel title={contentHeader}></MaterialTitlePanel>
       </Sidebar>
     );

And inside the component MaterialTitlePanel have these Styles:

const styles = {
  /*Propriedades do Pai Header*/
  root: {
    fontFamily:
      '"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif',
    fontWeight: 300,
    marginTop: "5%"
  },
  /*Propriedades do Header*/
  header: {
    backgroundColor: "#03a9f4",
    color: "white",
    padding: "5px",
    fontSize: "1.5em"
  }
};

In the view which encompasses the desired display have these elements:

<div style={{position: "fixed",overflow: "hidden",top:0, width: "100%", zIndex:10}}>
    <header>
        <Topo loading={this.props.loadingCardsConsulta}/>
    </header>
</div>
<div>
    <Menu />
</div>

I have tested several solutions and nothing has helped.

Answer 1

As far as I know, there’s a way to use something like

header: {
    position: fixed,
    backgroundColor: "#03a9f4",
    color: "white",
    padding: "5px",
    fontSize: "1.5em"
  }
};

To make it easier, you can create a . css file and put a class into the header and shape it into the css file