•  · 41 friends

How to center menu on Lucid?

How to center the navigation menu on Lucid so it is not on the top left?

πŸ’“0 πŸ˜†0 😲0 πŸ˜₯0 😠0 0
  • 278
  • More
Replies (8)
    • Hello Genesis !

      As Lucid top menu may have the variable width and Account menu is placed on the right to provide enough space to the maximum number of elements. So you may do:

      1) remove .bx-ti-stretcher class in the -menu-main-container (it's possible to do with the RAW block with Javascript code) and setup the settings of -menu-toolbar-2-container

      2) change the settings of those containers CSS classes via Studio->Lucid->Styles->Cystom Styles area like

      bx-toolbar-item bx-ti-menu for the first

      bx-toolbar-item bx-ti-right cd-nav and for the second

      But note that those changes will affect on mobile view too.

      πŸ’“0 πŸ˜†0 😲0 πŸ˜₯0 😠0 0
      • Is it possible to give give me a full example of the final code to put in the raw block? I don't know how to do it. But why not just share the UNA.io current lucid mixes so everyone can be up to date?

        πŸ’“0 πŸ˜†0 😲0 πŸ˜₯0 😠0 0
        • The current mix was shared here https://una.io/page/view-discussion?id=8156

          πŸ’“0 πŸ˜†0 😲0 πŸ˜₯0 😠0 0
          • I get how to so #2above, but don't understand this instruction from #1:

            "1) remove .bx-ti-stretcher class in the -menu-main-container (it's possible to do with the RAW block with Javascript code) and setup the settings of -menu-toolbar-2-container

            Β Where is this done?

            πŸ’“0 πŸ˜†0 😲0 πŸ˜₯0 😠0 0
            • Hello BIG Marketing Solutions LLC !

              It is possible to do in the Studio->Pages->[proper module]->[proper page]. Add there the RAW block, place it at the end of the page and fill it with the Javascript / JQuery code to delete the block with -menu-main-container CSS class. It will look like:

              <script>

              $('-menu-main-container ').remove();

              </script>

              πŸ’“0 πŸ˜†0 😲0 πŸ˜₯0 😠0 0
              • I want the topmost menu at sso.una.io to be centered on all pages. Β Is that possible with one change to studio or code?

                πŸ’“0 πŸ˜†0 😲0 πŸ˜₯0 😠0 0
                • Yes, it's possible to do with the Custom Styles area of your template. Just correct the settings of the bx-sliding-menu-main-cntΒ  CSS class (and other bx-sliding-menu prefixes).

                  πŸ’“0 πŸ˜†0 😲0 πŸ˜₯0 😠0 0
                  • Thanks. I'll try that.

                    πŸ’“0 πŸ˜†0 😲0 πŸ˜₯0 😠0 0
                    Not logged in users can't 'Comments Post'.
                    2
                    3
                    4
                    Labels:
                    Added:
                    Category:

                    UNA - Network Infrastructure for Communities

                    Close