Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #533688

    Hello,

    I’m using the sticky header with a transparent background on the menu. I’ve also added some custom css to make the dropdown menu background transparent. However when I scroll down, the sticky header background changes to my custom color background which is black. I like this effect, so I’d like to make the dropdown menu background black as well to match the sticky header ONLY when the sticky header background changes from transparent to black upon scroll.

    Can I achieve this with custom CSS?

    Thanks!

    • This topic was modified 8 years, 4 months ago by codemode.
    #533892

    Hi codemode,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #535070

    Hi Rikard

    I’m unable to do so cause I’m under an NDA with the client at this time.

    I basically just need my main menu’s dropdown menu background to be black when the user has scrolled down the page about 5% (or when the sticky header becomes active). And then go back to transparent when scrolled all the way to the top.

    I’m using white text for the menu. And this is the custom CSS I used to make the background transparent.

    #top ul.sub-menu {
    background-color: rgba(255, 225, 255, 0);
    font-weight:normal;
    }
    
    #top ul.sub-menu a {
    background-color: rgba(255, 225, 255, 0);
    font-weight:normal;
    }
    
    .main_menu .menu ul {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    This looks great when the menu drops down over a full width image directly under the header, however, when you scroll down the page where the background is white and then hover over an item in the sticky header to reveal the dropdown menu, you can’t see the white text on the white background. So in that case, I need the dropdown menu background to be black. And then back to transparent when all the way back to the top of the page.

    That make sense?

    #536010

    Hi!

    Make the sub menu black on scroll with this:

    .header_color.header-scrolled .main_menu .menu ul li a {
        background: #000000;
    }

    Regards,
    Ismael

    #536020

    Hi Ismael

    I tried and that didn’t work.

    FYR I have the logo area default background set to #000000 (black). But I have that area set to a transparent background on individual pages. So when you scroll, the header background goes from transparent to black. I just can’t seem to get the sub menu to have a black background when scrolled. As you can see from my code above, I have the submenu background set to alpha 0 by default for the transparent bg. However, I’m not sure how to override that to turn black on scrolled. Perhaps there is a better way to achieve the same effect?

    Thanks for your help!

    #536890

    Hi, I’ve narrowed it down to this custom CSS code:

    I need the following:

    #top ul.sub-menu {
    background-color: rgba(0, 0, 0, 0);
    font-weight:normal;
    }
    
    #top ul.sub-menu a {
    background-color: rgba(0, 0, 0, 0);
    font-weight:normal;
    }
    

    to change to:

    #top ul.sub-menu {
    background-color: rgba(0, 0, 0, 1);
    font-weight:normal;
    }
    
    #top ul.sub-menu a {
    background-color: rgba(0, 0, 0, 1);
    font-weight:normal;
    }

    when scrolled.

    I just need the correct CSS to do that.

    Any ideas?

    • This reply was modified 8 years, 4 months ago by codemode.
    #538892

    Hi!

    quite difficult without a link. Try this code:

    .header_color.header-scrolled .main_menu .sub-menu a {
    background-color: red;
    }
    

    Regards,
    Andy

    #539919

    I found another post and this CSS seemed to do the trick.

    #top ul.sub-menu a {
    background-color: rgba(0, 0, 0, 0);
    font-weight:normal;
    }
    
    .main_menu .menu ul {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    
    .av_header_transparency .main_menu .menu ul li a, .av_header_transparency .main_menu ul ul {
    background-color: rgba(0,0,0,0)!important;
    }
    

    Thank you for your suggestions.

    #540520

    Hi,

    Great, glad you found a solution :-)

    Best regards,
    Rikard

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Transparent Sticky Header Properties w/ Dropdown Menu’ is closed to new replies.