php - 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:

thank all of you for any help in this case!

kind regards, Rainer

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

• php
• menus
• css

Share Improve this question asked Feb 2, 2017 at 13:47 Rainer BrumshagenRainer Brumshagen 4711 silver badge99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You have another div controlling the full width background. You need to alter the css of that one if you want the width to look. This css takes the background off the full width div you have and put the background on the wrap div that you have maxing at 1200px;

.lifestyle-pro-blue .nav-secondary {background:none;} .wrap{background-color:rgba(0,0,0,0.5);}