Need to make a menu sticky

Beaver Builder
1

I’m stumped with a navigation row that I want to not scroll away. You can see the menu at www.PresentationSummit.com – the line that starts with “Tracks…Schedule…etc.”

This is not actually a menu created from the theme; it’s just a row of text. There are a variety of plugins that promise to make content sticky (so it won’t scroll away), and I can get exactly none of them to work, at least not with the BB plugin.

Has anyone had any experience/success with this? It is really the only piece of our website redesign that I couldn’t pull off. I would appreciate any help I can get, and in fact, if there are independent consultants who specialize in the BB Plugin, I would not be averse to hiring that person to assist.

2

Hi Rick,
What theme are you using ?
Note: I’m using the BB theme more and more because I’m finding features like this just work & the Customizer makes things so easy to style the site…
All the best, Dave

3

I’m using the BB theme, as well, and I would be fine turning this into an actual WP menu. It was not at all clear to me how that would get me closer to my objective of having it stick and not scroll, as the theme supports the stickiness of only one menu. The top one is already set to stick; I want a second one to stick, too. That’s my dilemma…

4

Ah I see, sorry didn’t fully comprehend your first post - I should have read it more carefully!
It sounds a bit tricky - having two menu’s both sticky. I’d be interested to see what feedback you get.
Cheers, Dave

5

Hey Rick,

Did you want that menu to stick together with your fixed header? If so you’re gonna need a bit of jQuery/javascript for that to work. If you want, you can make that menu as a top menu then make it stick there, it would be so much easier and achievable via CSS only.

Ben

6

Thanks, Ben – Can a page have two top menus? I already have a top menu and it already sticks. This would be in addition to that and it would only apply for one of my subs. From www.betterpresenting.com, you can see this for yourself if you click Annual Conference. A horizontal strip of links appears right below the top menu. I would like it to stick on that page.

7

Hey Rick,

On that page, you have 3 menus. First is the one beside the logo, which I believe is a menu you’ve created yourself. The second one is under the header, which I believe is a menu from the theme and the third is the one you’ve created yourself via the page builder, which is what you want to be fixed. What I would suggest is to activate the top header. Located under the Theme Customizer > Header > Top Bar Layout. Once you set that up, it will be located on the topmost part of the page. Please refer to the screenshot, the top most menu saying ‘Choose Menu’.
http://imgur.com/uaiOqEd
If you’d like, you can remove the menu you’ve created via the Page Builder, activate the top menu and make it stick. If you want it to appear on certain pages only, we can do so via CSS as well. Let me know if need assistance with that.

Ben

8

Yes, Ben, I once had the Home/About/Contact menu as the Top Bar Layout, but I did not want to spend the real estate – I wanted it moved down into the space it is in now. And the Tracks/Schedule/Team/etc. menu must appear below the menu from the theme, as it is subordinate to it.

I realize I’m being high-maintenance here: I have created the page exactly how I want it to look; now I want it to behave a certain way.

If there is a way to have this cake and eat it too, I’d be grateful for knowing how.

Rick A.

9

Gotcha, Rick! I actually played around with your site for a while and I figured the plugin you are using to make the menu stick is actually working, it just needs to be offset since we have a fixed header as well(it was under the fixed header). Please refer to the screenshot.
http://imgur.com/ntYUNpI
I’ve set a top margin and z-index for your extramenu class equal to the height of the header and it goes with it after moving the page down. Can you check the plugin you are using and see if there is a setting for that? If not, you can try these CSS snippets.

.extramenu.cloned {
  margin-top: 59px !important;
  z-index: 2 !important;
}

If you could share the plugin are using to achieve that we’d greatly appreciate it!

Ben

10

Thanks, Ben, for your continued help. I am trying to work with:

Sticky Menu (or Anything!) On Scroll
http://www.marksenff.com/plugins/sticky-anything-wp

I am able to get it to work sporadically on other elements, but not consistently and not with my faux menu. I’d be willing to provide you with a login if you thought that would help.

Rick A.

11

Hey Rick,

Did the above CSS snippet not work? Weird. Yes, if you could go ahead and grant us temporary admin access to the site I could check it real quick.

Ben

12

Thanks, Ben – I did not try the snippet because I did not know where to place it. I will send you admin login right now…

13

Hey Rick,

I added the CSS snippet under Appearance > Custom CSS. I also added another CSS snippet to offset for the admin bar when logged in.

Ben

14

So I don’t even need that plugin; I just need the CSS code you added, is that right? That’s what confused me – I was overcomplicating this! Many, many thanks for the help.

15

Hey Rick,

You actually need the plugin. What I said before was that the plugin was actually working, it was making the menu you’ve made stick, it’s just that it was behind the fixed header by the theme. So I just moved it down a bit. :slight_smile:

Ben

16

Ah, got it. So your CSS code was to position it properly. Thanks…