Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Re: Full-width Mega-Menu in Bootstrap

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

#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!