Adding shadow effect 2 and gradient for header; Making header top-bar not-fixed

Hi everyone,

1) I’d like to apply box-shadow “effect 2” and a
2) centered, circular gradient (like here: flare.bringthepixel.com ) and also
3) bold font both for the main menu and sub-menu
… to the main header.
4) Make the top-bar not-fixed, so that when the visitor scrolls down, only the main header stays fixed, or sticky, while the top-bar gets “scrolled away” (is this still English?), or disappears.

The “effect 2” solution is published here: paulund.co.uk/creating-different-css3-box-shadows-effects
The gradient generator is published here: css3generator.in/css-gradient.html
However, pasting in the codes into quick css does not provide the desired effect, and unfortunately I don’t know any better, as my knowledge of css is currently at the diaper-level.

For the sake of the remaining hairs on my head – does any know how to apply these codes through quick css? And if it’s not possible with quick css – where exactly in the child-theme css files should these code-lines be pasted in? Right now I’m pasting in various combinations of the css code, hoping that by some miracle I’ll hit the right combination…

In case that matters, my current quick css “basket” looks like this:

#header_meta {
box-shadow: none;
}

#header_main {
background-color: #0278fe;
border-top: none;
border-bottom: none;
box-shadow: 0px 8px 12px rgba(100, 100, 100, 0.49);
}

/*—- Font Menu Hover Color —-*/
#top .header_color .main_menu .menu ul li>a:hover {
color: #0278fe;
}

/*—- Background Menu Hover Color —-*/
.header_color .main_menu .menu ul li a:hover {
background-color: #ffffff!important;
}

.main_menu .menu li ul a {
background-color: #0278fe!important;
}

Thanks a lot,
Cheers,
Nerkas