Here is the header code snippet:
<header id="app-header"
className="fluid-container navbar navbar-default">
<div>
<button className={buttonClass}
onClick={this.openSideBar}>
<span className="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<h1>{this.props.title}</h1>
</header>
This header utilizes the latest stable version of React and Bootstrap.
The styling is done with some SASS:
#app-header
margin-bottom: 5px
display: flex
flex-direction: row
height: 5rem
div
width: 5rem
margin-right: -5rem // ensuring h2 center alignment on the entire row
button
background: transparent
border: none
width: 100%
height: 100%
&:hover
background: white
h1
height: 100%
margin: 0
flex: 2
text-align: center
font-size: 2rem
display: flex
align-items: center
justify-content: center
After applying the styles, the resulting header looks like this:
https://i.sstatic.net/clxjm.png
Interestingly, the hamburger menu is clickable in Chrome but not in Firefox. Removing all SASS styles causes the H1 to overlay the button, yet the button becomes clickable in Firefox.