Full-width Mega-Menu in Bootstrap

Home Forums Older releases 0.9.x Full-width Mega-Menu in Bootstrap

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1345
    elvista
    Participant

    Hi!

    I am trying to impliment a full width mega menu in bootstrap, similar to Yamm!3.

    I have seen the demos, but there doesn’t seem to be any indication of mega-menus (the markups are quiet different). However while browsing the forums, I found this site (http://www.comcare.gov.au/) which does have full-width mega-menu and is powered by smartmenu, but not bootstrap. I can’t seem to figure out how they implemented it though.

    I am hoping for any directions on how I can achieve the goals for my project. Will be appreciated 🙂

    Thanks!

    #1637
    admin
    Keymaster

    Hi,

    Sorry for the delay! We have national holidays here this week.

    Here are quick instructions:

    1) Start with the default SmartMenus Bootstrap demo “bootstrap-navbar.html”.

    2) Replace the markup in the demo with the markup from the Yamm demo page. You can just remove the ‘s from your markup because the SmartMenus script adds its own sub menu indicators dynamically.

    3) Include the yamm.css from the Yamm download package on your demo page.

    4) Finally, the yamm.css file will need some tweaking. Open it and replace the following CSS rule at the end:

    .yamm .dropdown.yamm-fw .dropdown-menu {
      left: 0;
      right: 0;
    }

    with the following rules:

    .yamm .dropdown.yamm-fw .dropdown-menu {
      left: 0 !important;
      right: 0 !important;
      margin-left: 0 !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
    }
    .yamm .dropdown.yamm-fw span.scroll-up, .yamm .dropdown.yamm-fw span.scroll-down {
      left: 0 !important;
      right: 0 !important;
      margin-left: 0 !important;
    }
    .yamm .dropdown.yamm-fw .dropdown-menu, .yamm .dropdown.yamm-fw .dropdown-menu * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    /* Grid demo styles */
    .grid-demo {
      padding: 10px 30px;
    }
      .grid-demo [class*="col-"] {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 1em;
        text-align: center;
        line-height: 2;
        background-color: #e5e1ea;
        border: 1px solid #d1d1d1;
      }

    That’s all. Let me know if you have any troubles.

    Cheers!

    #1640
    elvista
    Participant

    Hey thanks! That works.

    Consider putting a megamenu bootstrap example in future versions of smartmenu.

    Great work on the software. Really helps in making front-ends with bootstrap 🙂

    #1675
    kizony
    Participant

    Hi,

    I searched for solutions with mega menus in bootstrap. There are some, but when implementing in Smart Menus it doesn’t work.

    So, when I found this solutions, it was OK, but, when you put some list with links, It starts behaving very strange. For example, if you put from Yamm and hovering over links, the whole

      disappear. When I look at the source,

        has inline css with display:none.

        I tried this on Smart Menu demos, implementing Yamm mega menu, and also some list with links.

        Try to put this, with Yamm mega menu:

        So my question is, how to create a solution, with above example code (list) in mega menu that doesn’t fall apart?

        Thanks

        #1676
        admin
        Keymaster

        Hi kizony,

        Ah, yes, when including lists in a mega drop-down, you would need to also set the “mega-menu” class to the sub menu’s root UL element. E.g. like this for the Yamm classic list sample:

                    <!-- Classic list -->
                    <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">List</a>
                      <ul class="dropdown-menu mega-menu">
                        ...

        The SmartMenus script needs this class in general for mega drop-down menus since it tells the script to neglect any unordered lists inside the mega sub menu. Without this class the script treats such lists like regular sub menus and that’s why it tries to position and show/hide them.

        Let me know if you still have any troubles.

        Cheers!

        #1677
        kizony
        Participant

        Yes, this solved the problem.

        Thanks!

      Viewing 6 posts - 1 through 6 (of 6 total)
      • You must be logged in to reply to this topic.

      Register

      You will be emailed a link to set your password.

      Login

      Lost password?