Skip to main content
erin.brisson
erin.brisson
Contributor ⭐️⭐️⭐️⭐️⭐️
November 3, 2023
Open

Make Mega Menu Persistent

Related products:CC CommunityCC Customization
  • November 3, 2023
  • 14 replies
  • 219 views

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
    Gainsight Employee ⭐️
    olimarrio
    Gainsight Employee ⭐️
    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
      revote
      VIP ⭐️⭐️⭐️⭐️⭐️
      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
      revote
      VIP ⭐️⭐️⭐️⭐️⭐️
      November 6, 2023

      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
      Gainsight Employee ⭐️
      olimarrio
      Gainsight Employee ⭐️
      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
        erin.brissonAuthor
        Contributor ⭐️⭐️⭐️⭐️⭐️
        November 6, 2023

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

        Erin
        olimarrio
        Gainsight Employee ⭐️
        olimarrio
        Gainsight Employee ⭐️
        November 6, 2023

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

         

        erin.brisson
        erin.brissonAuthor
        Contributor ⭐️⭐️⭐️⭐️⭐️
        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!

        Erin
        revote
        revote
        VIP ⭐️⭐️⭐️⭐️⭐️
        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 😁

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

        revote
        revote
        VIP ⭐️⭐️⭐️⭐️⭐️
        November 7, 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 😁

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

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

        olimarrio
        Gainsight Employee ⭐️
        olimarrio
        Gainsight Employee ⭐️
        November 7, 2023

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

          Show more replies
          Terms & ConditionsAccessibility statement