Skip to main content

It would be really helpful if the mega menu could stay persistent at the top so you don’t have to scroll all the way up to see it again.

 

Possible?

 

Hey @erin.brisson 👋,

Although there isn’t currently the ability to configure this out of the box, you can achieve a ‘sticky’ mega menu using some custom CSS. An example of this would be:

.main-navigation--wrapper {
  position: fixed;
  top: 0;
  width: 100%;
}

Let me know if you need any help!

Oh, I would like to have this as well! I asked this one year ago, now I have to test this @olimarrio tip, thanks!

Although there isn’t currently the ability to configure this out of the box, you can achieve a ‘sticky’ mega menu using some custom CSS. An example of this would be:

.main-navigation--wrapper {
  position: fixed;
  top: 0;
  width: 100%;
}

Let me know if you need any help!

It seems that it hides the Mega menu and when you start scrolling down Mega menu appears again. Sometimes it is behind the some widgets / components. If you want please go and look our stage to see your self 😊

Hey @revote 👋,

That was just a quick example of how you could achieve it. We need to add a few more styling rules for this to work but this is just one of many ways of implementing this. I’ve gone into your staging environment and added a few more lines of CSS so that the mega menu no longer gets hidden behind other elements. Please note that this comes with the caveat that someone can probably code this far more elegantly than I have just done and should be tested by a technical resource on your side as well 😁

@olimarrio would this go under the <HEAD> section in third-party scripts?

@erin.brisson it can go in that section. Alternatively, it can go in Theme → Custom CSS:

 

Ok thanks. Would you also be able to provide the code I can add to ensure the mega menu no longer gets hidden behind other elements? I added this first initial code you provided to the Custom CSS. Thank you!

Hey @revote 👋,

That was just a quick example of how you could achieve it. We need to add a few more styling rules for this to work but this is just one of many ways of implementing this. I’ve gone into your staging environment and added a few more lines of CSS so that the mega menu no longer gets hidden behind other elements. Please note that this comes with the caveat that someone can probably code this far more elegantly than I have just done and should be tested by a technical resource on your side as well 😁

Oh wow, thanks. @olimarrio, you are mega 👌

Hey @revote 👋,

That was just a quick example of how you could achieve it. We need to add a few more styling rules for this to work but this is just one of many ways of implementing this. I’ve gone into your staging environment and added a few more lines of CSS so that the mega menu no longer gets hidden behind other elements. Please note that this comes with the caveat that someone can probably code this far more elegantly than I have just done and should be tested by a technical resource on your side as well 😁

Oh wow, thanks. @olimarrio, you are mega 👌

Yeah I founded few issues while testing and I cant publish it now.

@revote what were the issues? Maybe I can help resolve and then share with @erin.brisson. 

@revote what were the issues? Maybe I can help resolve and then share with @erin.brisson. 

Basically when using mobile, Topic banner isnt always visible / visible all the time. For example, at first Topic banner is visible when you open discussion, but if you scroll down Topic banner disappears totally. It doesnt appear, even you scroll up again.

Also I noticed that you have added some margin, I increased it to see the Topic banner fully.

Hey ​@olimarrio, this is something I want to do on my community as well. I initially added the code you shared above on my sandbox, but removed because I didnt have the addl lines in there to apply to my mega menu. Can you share the complete code here so I can try to make it work for mine too?

 

 

 

​@Laurenseife let me see if I can find the code that I previously added 👍

New Idea→Open
Terms & ConditionsCookie settings