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!

Register

You will be emailed a link to set your password.

Login

Lost password?