In the members-only forum a user asked
Hi Sridhar, I am trying to get my head round this.
I would like to make the background of the Minimum Pro header transparent like this:
http://5lx.co.uk/images/Screenshot%202016-07-21%2014.05.31.png
(And clearly I took that screenshot with site-header transparent and a negative top margin on the background image)But the header would then become opaque when the page is scrolled down:
http://5lx.co.uk/images/Screenshot%202016-07-21%2013.56.44.pngThis isn’t unusual design pattern but I am not sure how best to achieve it here.
Any ideas gratefully received.
Many thanks
In this tutorial we shall
- set the site header to be transparent (for screen widths 1024px and above)
- add a custom
scrolledclass to site header when the user has scrolled down to the tagline section (again, for 1024px and above) - write CSS to set white background to site header when it gets the scrolled class i.e., when the front page has been scrolled to the tagline
on Minimum Pro's front page.
Step 1
In js/backstretch-set.js below
$("body").backstretch([BackStretchImg.src],{duration:3000,fade:750});
add
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
That’s great Sridhar.
Many thanks. Great solution.
is there a way to do this without the Backstretch image – I have replaced my backstretch image per this: https://sridharkatakam.com/setting-responsive-image-place-background-minimum-pro/ – is there a way of just adding the js needed?
btw, i also replace the tagline with a welcome-message. my site is here: http://heartofwellbeing.com/site/
thanks, Theresa
Hi Theresa,
Follow these steps:
1) Create a file named home.js in Minimum Pro’s js directory having this code: http://pastebin.com/raw/Ezri7BpC
2) In front-page.php have the enqueue scripts code block like this: http://pastebin.com/raw/M4cfCXxy
3) In style.css have this code: http://pastebin.com/raw/1pSzdiZN
Here’s a zip file of the modified Minimum Pro with all the above changes for your reference: http://d.pr/f/Uw58