Top Menu on Scroll to be fixed or to look like menu when not scrolled

BB Theme
1

Hi,

I am struggling to get the top menu on scrolling to look like the top menu when it is not scrolling.

It is a custom menu at the top, the header layout is set none and fixed header as the page is scrolled is set to fade in. The fixed header setting to fix does not work.

How do I get the top menu to fix in place please - or on scrolling fade in and look like the top menu complete with the arrows for the submenus. url is in the private post below.

Thank you very much for the help.

Stephen

2

[Content Hidden]

3

Hey Stephen,

It would be easier if we’re to make your custom menu fixed. To do so, just add a CSS Class to that row so we can target it. This can be done under Advanced > CSS Selectors > Class. You can add any class name that you feel, e.g., fl-custom-menu. Then add the following CSS code.

.fl-custom-menu .fl-row-content {
  position: fixed;
  z-index: 99;
  width: 100%;
}

You’ll then need to add a top margin of 84px to the next row, to give space for the fixed menu.

Give it a shot and let us know how it goes! :slight_smile:

Ben

4

Many thanks Ben. Sadly that didn’t work. Also if I give a top margin of 84px - a white space appears.

Any advice - would be very gratefully received.

Thank you

Stephen

5

Sorry I should add, that the menu is appearing on scroll. I just need to spread the lettering out and somehow get the arrows in to show the submenus.

You are right though - in that if the top menu would stay fixed on scroll - that would solve my problem and it would not require the additional CSS.

What do you think ? Many thanks for the help

Stephen

6

Hey Stephen,

Where did you add the code? I visited your site and I can see the CSS class in place, but I can’t see the code above anywhere.

Ben

7

Ah, I just noticed you placed it on your style.css file. Sorry, forgot to check there. Actually, what I sent above was lacking. Can you change it to this instead…

.fl-custom-menu .fl-row-content-wrap {
  position: fixed;
  z-index: 99;
  width: 100%;
}

Ben

8

[Content Hidden]

9

Hi Ben - please cancel my message above - it is working a treat !

My fault. I changed the setting in the customiser to Header Fixed and it now works. A thousand thanks for the help !

Stephen

10

Awesome! And no worries at all, Stephen! Glad we could help. :slight_smile: Enjoy!

Ben