If you are not worried about having it on mobile, you can paste the below in Custom CSS tab in options panel or custom.css to achieve that effect. Again, have disabled it in mobile since space is a premium there anyway and user can get to the top menu by touching the top bar (in iOS).
@media only screen and (min-width: 768px) {
#header-area-wrap {
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #F9F9F9;
z-index: 9999;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.33);
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.33);
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.33);
overflow: visible!important;
}
.admin-bar #header-area-wrap {
padding-top: 28px;
}
#showcase-area, #custom-before-content-area-wrap, #before-content-wrap { margin-top: 115px; } /* 115px is the default height of the header */
}