Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Transparent header turns solid white upon scrolling


  #1  
Old Jan 13, 2018, 08:06 AM
rominjn
 
22 posts · Jan 2018
[SOLVED] Transparent header turns solid white upon scrolling

Hi Atahualpa community,

I need help on something that I haven't found the solution to. I have a header that includes a logo and a menu bar and is fixed in its position at the top. I would like the header to be transparent when I'm at the very top of the page so that the beautiful background image can show through, but turn solid white upon scrolling. I can't figure out what CSS code I should insert in order to accomplish this. Your help will be greatly appreciated.

Thank you.
Daniel
  #2  
Old Jan 14, 2018, 04:07 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Can you provide the URL of the site?

To change the property of the image 'on the fly' you are going to need a script to do it. You might want to look at the Jscript tutorials at https://www.w3schools.com/js/default.asp
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 14, 2018 at 04:11 AM.
  #3  
Old Jan 16, 2018, 10:42 AM
rominjn
 
22 posts · Jan 2018
It's test.dlimconsulting.com.

It's a draft website in progress.
  #4  
Old Jan 16, 2018, 02:16 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Why don't you change the image by adding the whitespace to the top of it. Then make the logo/menu bar have a transparent background.

That way, when you scroll, the white - which is part of the image - will scroll up and the image will show thru the logo/menu.

of course since threr is text scrolling wth the image. that will show behind the logo/menu when it scrolls far enough...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jan 16, 2018, 02:28 PM
rominjn
 
22 posts · Jan 2018
That would actually do the opposite of what I want. I want the header to be transparent when the page is at the very top and then turn white when I'm scrolling. I hope this makes sense.
  #6  
Old Jan 16, 2018, 06:34 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Ok, this isn't really an Atahualpa question, but a javascript question because you will need a javascript to do what you want. ut being intrigued, I thought I'd do some searching and see what I could find.

So I did a little googling and looked at w3schols.com and came up with this that would solve the case I first assumd it would be. This should be added to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Bottom
HTML Code:
<script>
onscroll = function() {myFunction()};

function myFunction() {
	document.getElementById("header").style.backgroundColor = "transparent";}
</script>
but you will have to do it a bit differently because you need to change the header to transparent to start and then change the color here. And you may have more to do, but I'll let you play with it and see where you get.

Feel free to ask for hints if you get stuck.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
solid bar on each side of the header rinoa3108 Header configuration & styling 3 Sep 6, 2015 06:20 AM
Background image AND solid color in header tbaxter Atahualpa 3 Wordpress theme 4 Oct 14, 2012 06:51 PM
[SOLVED] transparent background displays white in IE IldiW Post-Kicker, -Byline & -Footer 7 Jan 31, 2011 06:48 PM
[SOLVED] Made Page Menu transparent, but white outline remains. implet Page & Category Menu Bars 3 Jan 10, 2011 04:05 PM
Sometimes text in my blog turns white and becomes invisible midnight Atahualpa 3 Wordpress theme 3 Sep 13, 2010 06:33 AM


All times are GMT -6. The time now is 01:07 AM.


Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.