Full-width Mega-Menu in Bootstrap

[elvista]

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!

[admin]

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!

[elvista]

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 🙂

[kizony]

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:

• Link Item
• Link Item
• Link Item
• Link Item
• Link Item
• Link Item

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

Thanks

[admin]

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!

[kizony]

Yes, this solved the problem.

Thanks!

[Author]

Posts