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.

Bonjour,

I am interested in purchasing this script for future client website development.

Quick question, I would like to know if I am able install it via the CSS & JavaScript Toolbox plugin: https://css-javascript-toolbox.com

I think it would be easy to do, but I wanted to check.

Merci, Kym

Hi,

I’ve never tried that tool out, so I wouldn’t know if it would work or not.

Our file is pure CSS, along with Bootstrap HTML and JS.

Hi there. I bought your mega menu. I downloaded the zipfile. I extracted the contents— I am lost as to what to do next. Can you please help me?

Hello, you can use the files to implement the menu in your Bootstrap powered HTML templates.

Hello .. I hope you have great sales at this site .. Follow me TOO :D

Hi

I am using Bootstrap studio and I am trying to add this menu to my application. I have included all the files js and css as guided. but it is know showing me as it is supposed to show.

Which version of Bootstrap are you using?

Using your menu on bootstrap, how can I lock a menu so when the user clicks it, it will stay even if the mouse moves off the displayed dropdown (don’t want it to be cleared) .

Love the menu, it really added a lot of punch to my site!!

Hi, I don’t think you have support for the menu anymore.

Nevertheless, you can find information on how to do what you want for the menu via Google. There are many such resources online.

Sorry, I was trying to ask the question on solidmenus comment section but somehow clicked your comments instead. When I realized my mistake, I contacted SM with the same question and got a condescending remark (which I found very unprofessional).

Surprisingly to me, you responded even thought I hadn’t purchased your product, so to show you my gratitude I just purchased your Mega Menu for Bootstrap. Thank for a great product and your support.

Thank you for your support and kind words. It’s nice to see there are appreciative people still out there.

If you need any help, you know where to find me.

Hi im ignacio from argentina, first off all thaks you for the menu is amazing!

but i dont know how can i center de nav bar items. and add effects on dropdown .

for example:

now is :

home – test – test2 -test3 //////////

and i need :

//////// home – test – test2 -test3 //////////

thaks for you time!

Sorry, for the fantastically late reply. I don’t come here that often as the items don’t sell that much.

I can’t understand what you mean, can you show me an example via a sketch (or online). Maybe I can help you out. I will only come back from vacation next week, so please wait for proper reply.

Hi,

Cannot install the .zip file.

Thanks for helping

Regards,

Stéphane

It’s a CSS item. Not a WordPress plugin.

its not for prestashop?

It’s HTML based, it’s not a plugin if that’s what you are asking.

Hey, in the demo site, there is a typo!

http://codecanyon.net/item/responsive-mega-menu-for-bootstrap/full_screen_preview/3296119

Ready to Use We’ve made it easy to use rMM with your projects, simply copy the code from our examples and paste them into your files. Add the CSS and Viola! you’re Mega now!

Should be “Voila!” In fact, if you want to be a purist, it should be “Voilà!” ;-)

Voilà!...it’s fixed. Thank you :)

I have been struggling to figure out how to keep the dropdown menu items from extending beyond the left side of the window for smaller screen sizes. I selected this product to be able to use the responsive design so that it would work regardless of screen size. I’m assuming there must be something wrong with my code at this point. Any help would be appreciated. Screen sizes of 1280 and wider are good, but with a width of 980, the first column and a half of items are missing.

A draft of the page is at: http://www.csdvt.org/csdPresentationMega/index2.php, but is changing constantly. Check out the Students dropdown menu for a screen size of 980 wide.

Help please!

Since you’re using a two or three column menu layout put the mega menu for the dropdown with mega-menu-3 or mega-menu-2 instead of mega-menu-5

Because of the width of some of the dropdown items, I had set the three dropdown items to the class of two-column, so I thought the top level dropdown had to be set to the total number of columns, so I set it to mega-menu-6. I was trying to avoid having the items wrap to the next row. Any tips? Also, I was trying to hide the third column where the image was on smaller screens.

Thank you for your prompt reply the other day!

I saw a reply you sent to “jobu876” from a few years ago:

You will have to adjust the CSS for the class ’.dropdown-menu’ to have it align more to the left. For instance:

.dropdown-menu { left: -100px; }

I wasn’t sure if something like this might work for just the left-most dropdowns using an ID, but I wasn’t able to make this work either.

Let me know if you need more information to make this question made sense. I like the text of the dropdowns to fit without wrapping to new lines, so I had the li set to two-column widths. I love the look on the wider screen sizes, but 980 and smaller, the text for Students and Staff goes off the left side of the page. If I could even just hide the third column with the image on smaller screens, that might work.

Hello—thank you very much for your great menu. Awesome work. I do have a question about the height of the navigation menu. In what area and lines of CSS do I need to change for this? I see min-height: inherit and change this to 50px however, contents of menu doesn’t align to the middle in terms of height?

That’s because previously the padding around the menu would have aligned it to the center.

If you go here: http://getbootstrap.com/examples/starter-template/ and edit the CSS of the starter-template.css with this .navbar { min-height: 60px; } you will find the height of the navbar increase but the menu would not align center vertically.

So if you want it to align center with a 50px height change this bit of CSS in mega-menu.css: .nav > li > a, .navbar-brand { padding: 15px 15px; }

Hope that helps.

Perfect. Many thanks for your reply and help.

hi, pre-sales question: is there the javascript source code included? And is it possible to add items programmatically via Javascript ? most menu components expect HTML markup generated before (which i don’t need).

ok, so there is no Javascript API from you inside….

Hello, Is it possible to integrate your plugin on this template? with the same color http://themes.audemedia.com/html/servereast/index.html in the same place as the one already installed Thank you

Yes it can be integrated. Though our menu has some different styling, you might need some customization for it to match the theme “look”.

how much, for customization

Please contact me via my profile contact form for rates. Thanks.

Love your mega menu. It is currently driving me crazy or perhaps already has…Wanted to use the latest version in a general clean up renewal. Have setup a new server to move to. Moved and cleaned up 2 pages only to find the menu is not working as expected. First noticed problem on clicking to go to second page. No link took place unless I right clicked and choose Open link in new tab. Shrinking the screen to the smaller range brought up the expected drop down menu but once expanded it too would not allow the change from index.html to the tools.html page.

Took all js out and used only 2 js which were: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script> and <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script> Only this menu entry exists:

  • Options
  • Tools
  • Price
  • The problem is clicking on Tools link and nothing happens (unless I do the manual right click thing to open a new window). Using the target=”_blank” options also does not open the link. It has to be manual but because it links the address works.

    Now if I remove either of the two js entries clicking to open the link link does work HOWEVER the mega menu mobile hamburger drop down no longer works. At 1st I thought it was a corruption of either of the files so I changed to the CDN versions to do testing.

    As it stands I get either the desktop menu that allows the opening of the link or I get the expected drop down menu but no opening of the next page unless I right click and manually select Open in a new tab. Same in Firefox, IE and Chrome)

    What is going on? How do I get the drop down menu to open the expected link?

    I need to see a live example to asses what the problem might be.

    I have 3 issues with implmenting megamenu on my site: 1. i have a slidehow if i have megamenu drop down and slide chages, megamenu dissappears, 2. It doesnot work on hover 3. it doesnot work on mobile what can i do to fix.

    There is no more ‘hover’ state on menus for Bootstrap, I can’t do anything about that unfortunately. There are some solutions available using custom JS, like this: http://bootsnipp.com/snippets/featured/show-dropdown-hover-amp-caret-up

    You can implement that on your own if you like.

    As for your other queries I suggest you create a blank page with only the slider and the menu, remove all extra CSS stylesheets and see if it works. Then add your other scripts one by one.

    I’d like to help another momin out but the theme is too complex and I would have to go through a lot of code/stylesheets, that type of support is not possible for free.

    menu works on every page, only conflict it has is with main slider on home page. Do you have a different fluid slider that i can purchase that will work with your menu? or can you quote me a price to fix this issue. Also you didnot mention anything about mobile/smart phone devices? Its a volunteer work for our center so any help will be highly appreciated.

    Thanks

    Try the default Bootstrap Carousel here: http://getbootstrap.com/javascript/#carousel

    I suggest you start with just the slider/menu combination first and add other CSS stylesheets one by one to check which file could be the cause of the mobile version not working. As per my demo, and default settings, the mobile works fine.

    In other users experience it has been something from other files that have caused the issue.

    I currently have v1.2. If I upgrade to 2.0, do I have to change my ul/li code or do I just swap out the js and add new links to bootstrap? How my do I have to change from v1.2? Thanks.

    We updated the structure a bit from v1.4 onwards to relate with Bootstrap v3.0+. The main difference would be in some of the CSS tags applied to the elements and the structure is slightly different.

    Here is a basic template with Bootstrap v3.0+ http://getbootstrap.com/examples/theme/

    Here is a basic template with Bootstrap v2.3.2 http://getbootstrap.com/2.3.2/examples/hero.html

    You can view source to see the differences, there’s not much and apply them to your build. Add the new files that are a part of the menu and you should be fine.

    Also: on mobile devices, menu is automatically dropped down when the page loads (you dont’ see the page behind).

    Can this be fixed?

    Thank you!

    Your comment does not suggest you bought the item, buyers are denoted with the “Purchased” tag. Sorry, I can’t help you.

    Love this menu!

    Question: If I make main categories links, when in the mobile version, the + signs/icons are also linked and don’t close the drop down.

    Is there any way to avoid this?

    Your comment does not suggest you bought the item, buyers are denoted with the “Purchased” tag. Sorry, I can’t help you.

    Is there a way to make the menu drop down and show to the left? Like on UFC.com when you hover over the “Shop” link?

    Also, same problem as others with the drop down button not working when shrunk to mobile size. What is the fix for this? Thanks!

    http://buckfumble.com/index-test.php

    There’s a small error in the code, please change this bit of the code from the menu:

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">

    to

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

    I love you. Thanks a bunch! best menu system ever!

    A 5 star rating would be highly appreciated :)

    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