Fixed Menu Module on Scroll?

Beaver Builder
1

Is there any way to make the menu module fixed so that it stays at the t op when the user scrolls down the page?

Ideally I’d like the main header to disappear on these specific pages.

I totally understand if this is too complicated of a process and out of your scope to explain. Just thought I’d ask.

Thank you for all of your hard work! Loving the Beaver!

2

Hey Mark,

Thanks for posting! You could try the CSS snippet below. Be sure to add fixed as a class to your menu module. This can be found under the Advanced tab.

.fl-module-menu.fixed {
  position: fixed;
  top: 0;
  z-index: 999;
}

You can disable the header by using the No Header/Footer layout.

Hope this helps!

Ben

3

Thanks Ben. Excited to try this.

4

No worries! Let us know how it goes! :slight_smile:

Ben

5

Sorry to hijack this, but thought it would be useful for future service (and it’s a low priority customisation request!)

I’d like to hide the menu and make it reappear on scroll. Reason for this, so I can recreate this kind of layout:

Gif of Fixed overlay header

I know this is something a lot of people would benefit from. The great thing about the new menu module is that it allows us to create these overlay menus for fixed heads…but I want the best of both worlds :slight_smile:

6

Hey Chris,

That functionality is already included on our theme. And I think that’s where it should belong. Are you trying to create that layout using purely the BB plugin?

Ben

7

Hey Ben, thanks for the speedy reply.

Is this a recent change? I’m using the BB theme too.

So I’m looking for the transparent header and then it scrolls and overlays.

Here’s my dev site that I’ve build with menu module and the no header footer template.

http://newpareto.flywheelsites.com/

Do you see what I mean. I need the menu overlayed the image until scroll.

Cheers!

8

Hey Chris,

What I meant was our fixed header. It’s been with the our theme for a while now. If you wanted the transparent header, you can check the KB article below.
http://forum.wpbeaverbuilder.com/knowledge-base/transparent-headermenu/

Ben

9

Great thanks for that.

I’ve actually used the fixed header on a lot of sites, I was just trying to hack around it with the menu module - i’ll try this version of the CSS! Thanks!

10

Ben:

Is it possible to turn the fixed header off in the BB theme just on specific pages that are using the fixed menu module? I don’t want to lose the footer on these pages, so I think the no header/footer layout would not meet my specific needs.

11

Hey Mark,

We can’t actually turn it off but we can hide it via CSS. Each page has a unique class, page-id-#, which can be found on the body tag. There are a few other ways to get the ID as well, check the link below.
http://codex.wordpress.org/FAQ_Working_with_WordPress#How_do_I_determine_a_Post.2C_Page.2C_Category.2C_Tag.2C_Link.2C_Link_Category.2C_or_User_ID.3F

Once you get the page ID, you can then use the CSS snippet below to hide the fixed header. In this example, we are assuming the page/post ID is 5.

.page-id-5 .fl-page-header-fixed {
  display: none !Important;
}

Hope this helps!

Ben