How limit the width of a fixed menu-bar on scroll?

my primary menu-bar has transparent background. To have the menu visible always on top I looked for a solution and got the 2 codes you see below.
This code works fine, except the width of the menu-bar.

The fixed menu-bar on scroll has to be shortened to the size of the page (max-width 1200px). At the moment this menu-bar has the width of the screen.

To get the fixed half-transparent menu-bar (only visible on scroll!) I used these codes:
The first code in my modified style.css (line 1199):

.nav-secondary {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 16px;
    display: none;
    position: fixed;
    width: 100%;
    z-index: 999;
}

The second code in modified functions.php:

//* Reposition the primary navigation
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

//* Enqueue sticky menu script
add_action( 'wp_enqueue_scripts', 'sp_enqueue_script' );
function sp_enqueue_script() {
wp_enqueue_script( 'sample-sticky-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-menu.js', array( 'jquery' ), '1.0.0' );
}
//* Reposition the secondary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before', 'genesis_do_subnav' );

As you see in the css-code, the width is set to 100%. I tried 1200px but that doesn’t work here.
I’d like to have a responsive solution.

I’m using LifeStyle Pro Child theme. At the moment on my test-site:
http://www.official.jungvital.com

thank all of you for any help in this case!

kind regards,
Rainer