0

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

Improve this question

1 Answer 1

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);}

Improve this answer
3
  • Thank you! I modified the 2 codes in the style.css to the version above. Nothing happened at first, I cleared all cache, no change. But after I added the codes also to custom-css it is working fine. Have you an explanation for that? That the code-inserting in style.css has no effect?
    – Rainer Brumshagen
    Commented Feb 3, 2017 at 16:25
  • There is another unwanted effect from this code, especially from the .wrap code: Some widgets got this grey background at the bottom. .wrap is not only ruling the .nav-secondary. How can we fix this?
    – Rainer Brumshagen
    Commented Feb 3, 2017 at 17:18
  • CSS cascades, so a stylesheet must be loading after where you put it the first time. Your theme probably loads custom css last, so when you put it there the rules override the previous rules. You can target just the wrap in the header with .site-header .wrap{}
    – McPace
    Commented Feb 3, 2017 at 21:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.