Hiding Custom Menu on pageload in header-right

[Jason Weber]

Hey!

On a domain, I'm using Parallax Pro as a child theme.

I'd like to hide the custom menu in the header-right on pageload for the homepage, so the Parallax background images show, and my "story" tells better.

I'd like the menu to appear as soon as the user scrolls.

I've seen this effect achieved, but I'm unsure how to accomplish this, myself.

Any guidance in this regard would be greatly appreciated!

Thanks!

---

Webby’s WebPrezence
National Center For Due Process

https://www.nationalcdp.org

[Tonya]

Hi Jason,

The simplest way to accomplish what you want is to copy this javascript snippet and paste it in the wp_footer() box in Genesis > Theme Settings (at the very bottom of the page). Make sure you click on "Save Setting" button to save it.

What this code does is: On page load, the header nav is hidden; then as the user scrolls down 100px, the nav appears.

You can adjust the number of pixels for it to appear by changing the 100 to whatever number you want.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Jason Weber]

Perfect ... thanks Tonya!

I just replaced replaced nav.nav-header with .site-header, and that accomplished what I wanted to do ... which was not merely hide the menu, but hide the entire header.

Hey Tony .... Not to be a pest, but although this kinda worked, where the header was should be my extended background image. For some reason, however, the area where the header was is now white:

http://i.imgur.com/2mRvUo8.jpg

I'm sure this is some type of custom CSS fix, but I can't seem to find the right element or selector ... or maybe it's a matter of giving the background images a higher z-index.

Do you know how I could accomplish extending that background image all the way to the top upon page load?

Thanks!

---

Webby’s WebPrezence
National Center For Due Process

[Tonya]

Hi Jason,

Go to line 550 in your style.css file and change the margin-top from 70px to 0 as follows:

.parallax-home .site-inner {
	margin-top: 0; /* was 70px */
	max-width: 100%;
}

Now the .site-inner div on only the home page will move up to the top.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Jason Weber]

Perfect, Tonya! (sorry for the misspelling earlier)

I just put that snippet into my Custom CSS ... BAM!

That's precisely the effect I've been trying to achieve all day.

Thank you very much for taking the time to help me with this!

---

Webby’s WebPrezence
National Center For Due Process

[Tonya]

WooHoo!

You're welcome. Always glad to help 🙂

If you would be so kind as to mark this one "resolved", we'd greatly appreciate it. It helps us to find open issues.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Jason Weber]

Oops --- missed that option.

Thanks again Tonya!

---

Webby’s WebPrezence
National Center For Due Process

[Author]

Posts