# Start with no menu, show only after scrolling

**URL:** <https://community.wpbeaverbuilder.com/t/start-with-no-menu-show-only-after-scrolling/3189>\
**Category:** BB Theme\
**Created:** [May 13, 2015, 6:14am UTC](https://community.wpbeaverbuilder.com/t/start-with-no-menu-show-only-after-scrolling/3189 "2015-05-13T06:14:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nettimajakka](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/nettimajakka/32/310_2.png) [@nettimajakka](https://community.wpbeaverbuilder.com/u/nettimajakka)\
**Post date:** [May 13, 2015, 6:14am UTC](https://community.wpbeaverbuilder.com/t/start-with-no-menu-show-only-after-scrolling/3189/1 "2015-05-13T06:14:19Z")

</div>

Hi,

I’m building this site: [http://www.hoitolauusikuu.com/wp/](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 🙂

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [May 13, 2015, 6:40am UTC](https://community.wpbeaverbuilder.com/t/start-with-no-menu-show-only-after-scrolling/3189/2 "2015-05-13T06:40:28Z")

</div>

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.

```auto
/* 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](http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/).

Hope this helps!

Ben

---

<div class="post-metadata">

**Author:** ![nettimajakka](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/nettimajakka/32/310_2.png) [@nettimajakka](https://community.wpbeaverbuilder.com/u/nettimajakka)\
**Post date:** [May 13, 2015, 7:14am UTC](https://community.wpbeaverbuilder.com/t/start-with-no-menu-show-only-after-scrolling/3189/3 "2015-05-13T07:14:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [May 13, 2015, 7:17am UTC](https://community.wpbeaverbuilder.com/t/start-with-no-menu-show-only-after-scrolling/3189/4 "2015-05-13T07:17:36Z")

</div>

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.

```auto
/* 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

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [April 27, 2019, 10:16pm UTC](https://community.wpbeaverbuilder.com/t/start-with-no-menu-show-only-after-scrolling/3189/5 "2019-04-27T22:16:30Z")

</div>