hey guys,

is it possible to have the secondary navigation act the same as the main header transparency?  as in, both header & secondary nav are transparent, then both background color filled on scroll?

thanks!

Please can you still provide a way to make secondary nav 80% transparent?

Is there then a way to have both primary and secondary nav stay 80% transparent

Thanks!

devmg.redtogreendesign.com

I found how to make secondary nav transparent. But, how can I keep primary nav transparent on scroll?

Is it possible yet to have the secondary header start transparent and receive a background color on scroll?

+1 to this please! I absolutely love this theme. I really need the secondary nav but if it doesn\'t behave the same as the primary menu (transparent at first then solid on scroll) it looks really stupid on my site. Any idea when this feature might be added?

Hey there, I just wanted to chime to second Jamie\'s feature request. This would be a great feature to integrate for a future release! Thanks!

I found a solution in case anyone is looking.

Firstly you need to copy the footer.php into your child theme then put this code at the bottom before </body>:

<script language="javascript">
        $j=jQuery.noConflict();
        $j(document).ready(function() {    
            var nav = $j('#header-secondary-outer');
            $j(window).scroll(function () {
                if ($j(this).scrollTop() > <?php
                if ( is_front_page() && is_home() ){
                    echo '50';
                } else {
                    echo '350';
                }?>) {
                    nav.addClass("scroll-nav");
                } else {
                    nav.removeClass("scroll-nav");
                }
            });
        });
</script>

This will then give you a class of 'scroll-nav' on the secondary header div after scrolling 50 pixels on the homepage and 350 anywhere else (change as you want). 

Then just add some CSS rules to change the background after scroll:

body #header-secondary-outer.scroll-nav {
    background: #fff;
}
body #header-secondary-outer.scroll-nav nav >ul >li >a {
    color: #000;
}

Hi, i tried Jans method but it didnt work for me however this did.

I also don't have a child theme setup and jammed the script into the area it asks for google analytics in the salient theme options, which seems to do the trick.

<script language="javascript">
  $j=jQuery.noConflict();
        $j(document).ready(function() {
    var header = $j("#header-secondary-outer");
    $j(window).scroll(function() {
        var scroll = $j(window).scrollTop();

        if (scroll >= 50) {
            header.addClass("scroll-nav");
        } else {
            header.removeClass("scroll-nav");
        }
    });
});
</script>

Can then just add some css for

body #header-secondary-outer.scroll-nav {
   
}