Tagged: header, transparency
-
AuthorPosts
-
August 12, 2016 at 6:05 pm #671971
Hi,
I would like to make some changes to my home page and need some help, please.1. I would like to adjust the header transparency so you can read the header but also see the slideshow content behind it. I’ve tried this css I found in the forum here but it adjusts the transparency of the smaller header once you scroll, not the main header before you scroll:
#header{
opacity: 0.6;
}I would like the initial load / larger header to be .8 or so, and then the smaller header after scrolling to be non-transparent.
2. I would also like to perform an effect like I see on this webpage where you see a slideshow, and then the content below the page scrolls up over the slideshow. Is this what is called a parallax effect? I’ve never understood that effect but I like it a lot when I go to other websites. Here’s the website I would like to emulate the behavior:
Can you tell me how I do this… color section + background + certain slider or ??
Thanks so much!!!!
Rob
August 12, 2016 at 9:12 pm #672066Sorry… for some reason the links didn’t come through??
Here’s my homepage:
http://www.thomashenthorne.com/
Here’s the website I’m trying to copy:
Hoping the links work this time…
August 12, 2016 at 11:09 pm #672117I worked on #1 above some more and found the below code on the forum, which has helped but has not solved the issue with the secondary menu at the very top (where the social icons are):
/*transparent header*/
.header_color .header_bg{background-color: rgba(255,255,255,0.9);}
#top .av_header_glassy.av_header_transparency #header_main {
background-color: rgba(255,255,255,0.7);
}Link to staging site included in private content area pasted below so you can see the results of what I’ve done so far.
As for #2, I don’t know where to begin so will definitely need help on that.
Have a good weekend and thanks again!
August 16, 2016 at 6:39 am #673014Hi,
Thank you for using Enfold.
1.) Use this for the top header:
#top .av_header_transparency #header_meta { background-color: rgba(255,255,255,0.7); }
2.) You can create a parallax effect but not with the slider. Use the color section, add a background image then set the background attachment to parallax.
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.