Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 10, 2015 at 9:39 pm #533688
    codemode

    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 9 years ago by codemode.
    November 11, 2015 at 9:22 am #533892
    Rikard

    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

    November 12, 2015 at 8:33 pm #535070
    codemode

    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?

    November 15, 2015 at 4:51 am #536010
    Ismael

    Hi!

    Make the sub menu black on scroll with this:

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

    Regards,
    Ismael

    November 15, 2015 at 6:48 am #536020
    codemode

    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!

    November 16, 2015 at 9:35 pm #536890
    codemode

    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 9 years ago by codemode.
    November 19, 2015 at 11:54 am #538892
    Andy

    Hi!

    quite difficult without a link. Try this code:

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

    Regards,
    Andy

    November 20, 2015 at 8:55 pm #539919
    codemode

    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.

    November 23, 2015 at 7:13 am #540520
    Rikard

    Hi,

    Great, glad you found a solution :-)

    Best regards,
    Rikard

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