Skip to main content
Open

Make Mega Menu Persistent

Related products:CC CommunityCC Customization

erin.brisson
  • Contributor ⭐️⭐️⭐️⭐️⭐️
  • 81 replies

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?

 

14 replies

olimarrio
Forum|alt.badge.img+4
  • Gainsight Employee ⭐️
  • 402 replies
  • November 6, 2023

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!


revote
Forum|alt.badge.img+2
  • VIP ⭐️⭐️⭐️⭐️⭐️
  • 786 replies
  • November 6, 2023

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


revote
Forum|alt.badge.img+2
  • VIP ⭐️⭐️⭐️⭐️⭐️
  • 786 replies
  • November 6, 2023
Oliver Marriott wrote:

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 😊


olimarrio
Forum|alt.badge.img+4
  • Gainsight Employee ⭐️
  • 402 replies
  • November 6, 2023

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 😁


erin.brisson
  • Author
  • Contributor ⭐️⭐️⭐️⭐️⭐️
  • 81 replies
  • November 6, 2023

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


olimarrio
Forum|alt.badge.img+4
  • Gainsight Employee ⭐️
  • 402 replies
  • November 6, 2023

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

 


erin.brisson
  • Author
  • Contributor ⭐️⭐️⭐️⭐️⭐️
  • 81 replies
  • November 6, 2023

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!


revote
Forum|alt.badge.img+2
  • VIP ⭐️⭐️⭐️⭐️⭐️
  • 786 replies
  • November 6, 2023
Oliver Marriott wrote:

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 👌


revote
Forum|alt.badge.img+2
  • VIP ⭐️⭐️⭐️⭐️⭐️
  • 786 replies
  • November 7, 2023
revote wrote:
Oliver Marriott wrote:

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.


olimarrio
Forum|alt.badge.img+4
  • Gainsight Employee ⭐️
  • 402 replies
  • November 7, 2023

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


revote
Forum|alt.badge.img+2
  • VIP ⭐️⭐️⭐️⭐️⭐️
  • 786 replies
  • November 8, 2023
Oliver Marriott wrote:

@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.


Laurenseife

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?

 

 

 


olimarrio
Forum|alt.badge.img+4
  • Gainsight Employee ⭐️
  • 402 replies
  • November 28, 2024

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


Sudhanshu
  • Gainsight Product Manager
  • 172 replies
  • December 13, 2024
New IdeaOpen

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings