Hide menu bar and site title on cover section

[12b]

I am looking to hide the menu and site title bar when the cover is visible. Once the user has scrolled to the main body of the page the site title and menu should be visible.

See site I am working on here: http://sarahlyallinteriors.co.uk/dev-home

Is there a way to make this work? Not sure what CSS might be needed.

[mariusjopen]

Dear @12b
on the example I do not see a hidden nav-bar.
But I know what you mean.

You could hide it with CUSTOM CSS and make it appear with jQuery when the Second row reached the top of the browser.

You know how to do that?

Best!

Marius

[12b]

I don't know how to do that instinctively but if you could direct me in how this might be done i'd love to give it a go!

Let me know :)

[mariusjopen]

Dear @12b

you use this to see if an element reaches the top:
https://stackoverflow.com/questions/7543718/test-in-jquery-if-an-element-is-at-the-top-of-screen

Then you add a class to the navigation-bar to make it appear again.

Beware that you need to use the jQuery like this:
http://laytheme.com/documentation.html#custom-javascript

Let me know if that works for you.

Best!

Marius

[David22]

Hi Marius,
could you explain a little bit further on how to do this?
I also want to move the navigation under the cover module.
Thanks!
David

[mariusjopen]

Dear @David22

there are many good tutorials out there which explain how to hide a div box on scroll with jQuery.

To have the menu above the cover, I would try to change the z-index. And play around with position: fixed.

Hope that helps!

Best!

Marius