Code

Discussion on responsive Mega Menu for Bootstrap

Discussion on responsive Mega Menu for Bootstrap

Cart 1,039 sales

Weborithm supports this item

Supported

This author's response time can be up to 2 business days.

106 comments found.

I am noticing something weird… If I place a non-dropdown li in the middle of the menu, when viewed in a smaller window, this li element disables all the LIs above it. It creates a block element that when in xs mode, it covers up the drop down toggles of the above LIs.

Hi,

You can add the ‘dropdown’ class to it and it will then work without issue.

Like this: <li class="dropdown"><a href="menu.htm">Main Menu</a></li>

Yep. Thanks!

deleted

Whatever it was, hope it’s OK now :)

during the installation it appears this message:

Unpacking the package…

Installing the plugin…

The package could not be installed. No valid plugins were found.

Plugin install failed.

I don’t know what’s the prob.

please tell me what i can do to use it!!

It cannot be used on a WordPress site.

i have wordpress site :(

nevermind. i figured it out on bootstrap.css

I do have one more question: this is how the page looks like:

http://www.pgdesigngroup.com/beta/index2.html

How do i make the menu center both vertically and horizontally?

You can add this bit of CSS to mega-menu.css to fix your spacing request.

.navbar { margin-bottom: 0; } .nav { margin-top: 30px; }

Hi!

This works great! however, is there a way to change the width of the menu container/background to 100%?

something like this:

http://www.purefixcycles.com/

i was trying to mess with some of the css like this: width: 100%; background: 000;

but had no luck on doing so, and i’m not sure which area to change it at.

thanks!

rens

The menu is in a div with the class=”container”. Removing that and the closing /div (for the container) will make the menu go full width.

it worked! thanks. also, i tried going into the customize.css file and change the background color to black. i used the customiz.htm page that your provided and copy and pasted and it didn’t work. i also tried manually inputting it into the customize.css and nothing happened as well. am i changing the wrong css file? could you please tell me which file and which class/id to change? thanks!

“noisemastering” change line 59 of “mega-menu.css”

from .navbar { padding: 0; min-height: inherit; z-index: auto !important; }

to navbar { padding: 0; min-height: inherit; z-index:999; }

Thanks for being helpful! I haven’t tested this but from looking at the code it should work.

Hi,

The menu is being displayed as if it has a lower z-index than the the rest of the page elements. I’m using it with navbar-fixed-top class. How can I solve this?

Thanks

Try out the method given by ‘calvinstreeting’, it should work. If not, I’ll take a look further.

Thanks for the suggestion but it still stays behind the rest of the page, I mean, the drop down elements are in front but the navbar stays behind.

My bad, it does work.

Hi, I hope you can help. I am having an issue with alignment. If I am using a 4 column mega menu and the there are 8 groupings (LIs) (4 on top and 4 on bottom) and all the groupings are even width (like your example) it looks great. But, if the last grouping (#4 Li ) on the top row is shorter than the rest, well, then the 5th Li rides up under the 4th one causing everything to look messy. Is there a simple fix for this without having to add extra code to yours? Does this make sense at all? Your demo does the same thing so I know it isn’t my installation. Thanks in advance.

Add a separator class after the 4th LI, like so:

<div class="dropdown-separator" /> 

It’s in the examples provided.

Hi,

Quick question: How can I stick the menu to the very top of my website?

Cheers

Update the outermost div with ‘navbar-fixed-top’ class:

<div class="navbar navbar-inverse navbar-fixed-top" />

Awesome, thanks

Hi

I am having trouble loading the menu on mobile devices. Just want to clarify one or two things to make sure I am not missing anything. In your documentation you gave these examples. <!- Place these BEFORE the opening body tag ->

<link href=”css/bootstrap-responsive.css” rel=”stylesheet”> I do not have this referenced css file in my download.

If I minimize the screen to a mobile size, the top right menu icon is stagnant, without dropping the menu . In a mobile device, it does not show up,

If you want to check my implementation, it can be found at gloryhrt.com.

Your assistance is appreciated .

The bootstrap-responsive.css file was only used for version 2.3.1 and prior. So please update to the latest version of the menu,

Great product

I am trying to figure out how to position the menu to where i want it to be. it should replace this menu seen here.

http://www.irevivalmedia.com/glory/layerslider6.html

but this menu positions at the bottom of the screen like this

http://www.irevivalmedia.com/glory/layerslider13.html

also it does not seem to be responsive on mobile.

Where do I make the changes? many thanks in advance.

You put the HTML of the menu at the bottom of the file, which is why it’s showing up below. Move it into the area above the gallery and you will see it above.

I found a menu creator module for magento from this site http://www.menucreatorpro.com/ but not sure it is support bootstrap or not? have they reference your responsive menu? If I buy your plugin, is it possible to use for multi site per license? I have 3 magento site. Please reply asap

Thank you

That’s a separate system from our menu, it’s a solution on its own. You don’t need my menu to use that module.

Can I ask you a Question? Why not Make this a Wordpress Plugin? You would sale a lot.

It’s dependent on Bootstrap, so loading Bootstrap CSS and JS would be required to run it. Causing unnecessary load on themes and possibly loads of compatibility issues.

But yes, it’s on my mind. Have to clear out my backlog first. Thanks for your interest!

Can i use this product on my software? I have a shoppingcart software and I want to add this menu as a feature by customizing it and include it in the final product. I am allowed to do this?

Yes, you must buy the Extended License for that purpose. One Extended License grants you permission to use it one end product. More info here: http://codecanyon.net/licenses/extended

Hi Please check here http://ideastudios.com.ar/help/ on item “AÑO 2009” the item “NUESTROS SITIOS” must be as a new item next to “AÑO 2009” and not inside “AÑO 2009” and have space to place it. If you hover item “AÑO 2004 al 2007” inside item 2005 and 2006 the hover effect moves part of the menu’s text item to the next line and need to be fixed on the same line when hover. You can download the demo here: http://ideastudios.com.ar/help.zip Can you help me? Thanks.

You need to use the 2 column mega menu for the ANO 2009 menu. You’ve nested it wrong. Use the sample files provided to create a new menu for it.

If you do not want the hover effect you can remove the ‘transition’ class from the menu.

Thank you, fixed, good support. It works. Only one more question. How can the item “NUESTROS SITIOS” and others use all the width’s space along the menu’s items? the idea is to use one line item or near that. Check it here http://ideastudios.com.ar/help/

I use li class one-column

Hi, Using mega-menu-2 the hover effect moves part of the menu’s text item to the next line and need to be fixed on the same line when hover. Seems to be there is no space for hover effect and can’t reduce the text in my design. Where can change

  • or how put an inline style to avoid the item moving to the next line when hover? Thanks. Mike
  • Hi,

    I have implemented mega menu in a solution together with bootstrap (modx extra) and must have made a mistake, since the menu links in the dropdown menu cannot be activated on a touch screen, like a iphone og sony android?

    Got any idea of that the mistake can be?

    E

    Don’t bother – found the problem – a simpel type error. Sorry for the inconvenience…

    hello. you have specified that the menu is ie8 compatible. i have tried to use it in ie8 and is not working. so, how is it?

    The preview you are watching is for Bootstrap v2.3.2, which is not IE8 compatible.

    The menu for Bootstrap for v3.0, which is also included in the package, is compatible with IE8.

    Please keep in mind that IE8 is an old browser and new web development technologies will slowly erode old practices. So it’s best to upgrade now.

    in this case, the preview you offer should be with bootstrap 3 and olso, there are alot of pc’s with windows 7 wich is shipped by default with ie8, so ie8 support is still important for any website owner.

    Be carefull to buy this product. Weborithm don’t reply on requests and give no support. Have contacted Weborithm five times, and have had NO RESPONSE at all!

    Glad you this time responded – just sad it took a comment here to make it happen! If you havent got the five mails I have sendt formerly, I guess you need a system check…

    Any way my request was a how to about making a level 2 or 3 in the mega menu

    I get tons of other emails just fine, no idea where your other 4 emails went.

    Anyway…

    v2.3.2 supports multi-level for regular dropdown menus only. Not the mega menu.

    v3.0 does not support multi-level because Bootstrap by default does not support it anymore.

    Level 2 and below menus are not a feature in the mega menu, because that’s the whole point of a mega menu. To do away with multi-level menus.

    I’ve never seen a working site with a multi-level mega menu, if you have…feel free to share it here. I’d like to see it.

    As for how to go about making one, well I’ve not attempted to make it with this item because it was not designed to be like that.

    Maybe I’ll make another menu that can support multi-level mega menus or multi-levels within a mega menu. But this item will not support it.

    You are free to modify it as you wish.

    Thanks for the reply. Agree that the idea is not to smart, but a client was very much up for it…

    by
    by
    by
    by
    by
    by

    Tell us what you think!

    We'd like to ask you a few questions to help improve CodeCanyon.

    Sure, take me to the survey