Start with no menu, show only after scrolling

BB Theme
1

Hi,

I’m building this site: http://www.hoitolauusikuu.com/wp/ and have one query.

How can I make my home page load first with no visible menu which would then appear in its current/normal size when user starts to scroll down?

Also is it possible to somehow define the height of the first (orange) row so that it would always cover the height of the display?

Thanks in advance for your help!

ps. Finnish translation is in progress :slight_smile:

2

Hello Hannu,

Thanks for getting in touch! Do you want to hide just the menu or the entire header? We can hide the original menu through CSS. Try this snippet.

/* Hide original menu on the header */
.fl-page-header-primary .fl-page-nav {
  display: none;
}

Regarding your second inquiry, it can only be done through custom CSS. You can try adding a class to that row and setting it up with height of 100vh, more of that here.

Hope this helps!

Ben

3

That hides the menu OK but I want to hide both the logo and the menu, i.e. the whole white bar and make it appear when user starts to scroll down.

4

Hey Hannu,

Yep, was part of my question earlier as I can see what you were trying to do. You can use this snippet to achieve that.

/* Hide the menu but not completely */
.fl-page-header-primary {
  position: absolute;
  left: -9999px;
}

You may wonder why use this and not display:none; - it’s because the fixed header appears when the user scrolls past beyond the height of the primary header. Setting it to display:none; would make its height 0 causing the function not to work.

Hope this helps!

Ben