Wie limitiert man die Breite einer festen Menüleiste beim Scrollen?

Meine primäre Menüleiste hat einen transparenten Hintergrund. Um das Menü immer oben zu sehen, suchte ich nach einer Lösung und bekam die 2 Codes, die Sie unten sehen. Dieser Code funktioniert gut, mit Ausnahme der Breite der Menüleiste.

Die feste Menüleiste bei Scroll muss auf die Seitengröße gekürzt werden (max-width 1200px). Im Moment hat diese Menüleiste die Breite des Bildschirms.

Um die feste halbtransparente Menüleiste zu bekommen (nur sichtbar auf scroll!) Habe ich diese Codes benutzt: Der erste Code in meiner modifizierten style.css (Zeile 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; } 

Der zweite Code in der modifizierten 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' ); 

Wie Sie im CSS-Code sehen, ist die Breite auf 100% eingestellt. Ich habe 1200px versucht, aber das funktioniert hier nicht. Ich hätte gerne eine reaktionsfähige Lösung.

Ich benutze LifeStyle Pro Child Theme. Im Moment auf meiner Testseite: http://www.official.jungvital.com

Ich danke Ihnen allen für die Hilfe in diesem Fall!

Mit freundlichen Grüßen, Rainer

Solutions Collecting From Web of "Wie limitiert man die Breite einer festen Menüleiste beim Scrollen?"

Sie haben ein anderes div, das den Hintergrund in voller Breite steuert. Sie müssen die CSS ändern, wenn Sie möchten, dass die Breite aussieht. Diese CSS nimmt den Hintergrund von der vollen Breite div, die Sie haben, und legen Sie den Hintergrund auf die Wrap div, die Sie bei 1200px maxing haben;

.lifestyle-pro-blue .nav-sekundary {Hintergrund: keine;} .wrap {Hintergrundfarbe: rgba (0,0,0,0.5);}