Sticky Top Header Bar

Is there a way to make the top header bar sticky? I tried doing this off of a previous post regarding this issue and used this custom CSS but the top header is now sticky but covering the main header.

/* Make Top Bar fixed */
#header-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999999999;
}

/* Make space for Top Bar */
#main-wrapper {
margin-top: 40px;
}

body #header-inner.stuck,
body #header-inner {
top: 40px !important;
}

/* Display Top Bar on mobile devices */
@media handheld, only screen and (max-width: 900px) {
body #header-bar {
display: block !important;
}
}

Thanks in advance!