Header menu is not visible in tablet and phone

[ozgurrgul]

I'm trying to show a header in site, desktop is ok but it's not visible in tablet and phone. Here is the snippet I'm testing.

{/* Always shows a header, even in smaller screens. */}
<div style={{height: '300px', position: 'relative'}}>
    <Layout fixedHeader>
        <Header title={<span><span style={{ color: '#ddd' }}>Area / </span><strong>The Title</strong></span>}>
            <Navigation>
                <a href="">Link</a>
                <a href="">Link</a>
                <a href="">Link</a>
                <a href="">Link</a>
            </Navigation>
        </Header>
        <Drawer title="Title">
            <Navigation>
                <a href="">Link</a>
                <a href="">Link</a>
                <a href="">Link</a>
                <a href="">Link</a>
            </Navigation>
        </Drawer>
        <Content />
    </Layout>
</div>

Also, have viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What's the problem?

Thanks in advance.

[ozgurrgul]

I found the problem. Adding display: none for mobile devices is intended?

@media screen and(max-width: 1024 px) {
    .mdl-layout__header {
        display: none
    }
    .mdl-layout--fixed-header > .mdl-layout__header {
        display: -webkit-flex;display: -ms-flexbox;display: flex
    }
}

[lonebots]

where to edit this code line to solve the same issue with the current react-mdl layout