Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • November 5, 2014 at 1:14 am #346286
    gszalay

    I am wanting to change the header (already selected as sticky & transparent) such that once the user scrolls down, the elements of the page are no longer shown through the header, but it is solid and no longer transparent.

    i.e. When the page loads, the header is transparent showing 100% the page items, images, etc. Once you begin to scroll down and the transparency goes away, I would like this to be opaque.

    November 5, 2014 at 7:14 pm #346714
    Elliott

    Hey Grant!

    Try adding this to your custom CSS,

    .header_bg { opacity: 1 !important; }

    Best regards,
    Elliott

    November 6, 2014 at 12:27 am #346874
    gszalay

    Thank you Elliott. I put it in the General Styling Quick CSS and it worked perfectly!

    November 6, 2014 at 12:33 am #346883
    gszalay

    I noticed that this works perfectly if using a background color and select “No Background Image”.

    However, as soon as I a background image, the initial transparency of the header/menu area disappears and the background image is shown. This stays the same whether the user is at the top of the page or scrolls down.

    Is it possible to use a background image and have the header change to be opaque once the user scrolls down?

    November 6, 2014 at 4:45 pm #347167
    Yigit

    Hey!

    Can you please post the link to your website?

    Regards,
    Yigit

    November 7, 2014 at 6:56 am #347540
    gszalay

    Certainly. It’s http://www.pacificbikeandski.com/newsite/

    I currently have no background image selected for the logo area and the transparency/opacity works fine. However, the minute I change to having a background image the transparency no longer functions as it would without the image.

    Without a background image: works fine. The full image shows through when the user is at the top of the page.

    With a background image: the logo/header area is no longer transparent (the image on the page does not show through the menu).

    November 8, 2014 at 4:08 am #348060
    Ismael

    Hi!

    Please use this:

    .header_color .header_bg, .header_color div {
background-color: rgba(0,0,0,.5);
color: #ffffff;
border-color: rgba(255,255,255,.5);
}

    If this is not what you’re looking for, please post a screenshot on how you want the header to look like when it is on top of the page and when you scroll the down the page.

    Regards,
    Ismael

    November 11, 2014 at 1:35 am #349157
    gszalay

    Ismael, thank you for responding. That wasn’t really what I was looking for.

    I have posted this page for an example of what I am looking for.
    http://www.pacificbikeandski.com/newsite/transparency/

    Really the effect is to use the transparent menu & header, but when the user scrolls down, the header opacity is 0, meaning none of page elements can be seen through it.

    Thank you,
    Grant

    November 11, 2014 at 4:05 pm #349437
    Yigit

    Hi!

    Please flush browser cache and refresh your page a few times. This is how it looks on my end – http://i.imgur.com/HSPzqIh.png

    Regards,
    Yigit

    November 14, 2014 at 12:40 pm #351207
    aovivo

    Hi there – hope I can join into this topic…
    Basically I am looking for the opposite: I’d like to have the header/menu transparent all the time while scrolling (using one-page site).
    any idea?

    November 15, 2014 at 12:07 am #351596
    Elliott

    Hey!


    @aovivo    , Try adding this to your custom CSS.

    .header-scrolled .header_bg { opacity: 0 !important; }

    Cheers!
    Elliott

    November 15, 2014 at 7:27 am #351716
    aovivo

    Hey Elliot,
    thanks – unfortunately it didnt work. the color that I had to choose for transparency background is still showing up.
    any other idea?

    November 16, 2014 at 5:00 pm #352052
    Elliott

    Hey!

    Send us a link in a private reply and we’ll take a look.

    Best regards,
    Elliott

    November 17, 2014 at 8:24 am #352287
    aovivo
    This reply has been marked as private.
    November 17, 2014 at 4:13 pm #352486
    Elliott

    Hi!

    Try this.

    .header_bg { opacity: 0 !important; }

    To target it when your not scrolling then use this.

    .av_header_transparency .header_bg {  }

    Regards,
    Elliott

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.