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.

OK, I finally had the time to finish my galleries and now that it is live I have found that the social icons don’t display and the lightbox images get cropped on the desktop and on mobile devices except for the firefox desktop browser. Can you tell me why this is happening?

If you view the link below in the firefox desktop browser you will see what the full size of the images should be in the lightbox. All other browsers crop my images and I am on a Mac if that makes a difference.

http://www.gallerymolina.com/gallerymolina/?page_id=71#

Thanks

What do your gallery images have to do with the menu? Are you talking about the social icons that came with the menu? I don’t see them as part of the menu anywhere.

I am sooooo sorry! wrong post

Hello. How can I embed this menu into Joomla3! Is it possible?

Sorry, I’m not familiar with Joomla. This is a CSS/HTML only file though.

Hello. How can I embed this menu into Joomla3! Is it possible?

Must the development site be built on bootstrap to utilize this Menu?

TIA for your response. ;)

Michael

The site need not be built on Bootstrap, you can use any other framework for your regular HTML.

We’ve only included the absolute necessary parts of Bootstrap CSS, though there might be a few elements that might clash with other frameworks.

I can’t offer advice on any clashes you may experience, as that would be outside the scope of support offered here.

Hope that helps.

I do have one issue if you have a minute… on my Photography drop-down when you scroll over the B & W image it drops the Macro and Artistic Nude it down and slides the Wildlife over, do you know why and how I can correct this?

http://gallerymolina.com/gallerymolina/initializr/bio.html

Thanks

Open up your clear.css and remove this CSS style from it:

.nav li{ float:left; position:relative; bla bla…etc etc box-shadow: 0px 1px 0px #FFF, inset 0 1px 0 #FFF; }

That should fix it.

Also you have you two instances of jQuery loading in the footer area. You need only one.

1. https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

2. http://code.jquery.com/jquery-latest.js

Thanks so much for pointing that out. I couldn’t remove that css since it is the tabs design element but I did rename it and it is fine now. I thought it was part of the jquery.

THANKS A LOT for pointing that out and all is fine now.

No problem, please rate 5 stars if you are happy :)

How can I make the menubar width 100% on all devices? In desktop version, the menubar goes all the way across the top which is exactly what I want. How do I make it do the same thing on tablets and phones?

Thanks!

Dalton

Here’s how you do it.

1. Remove the <header class=”container”>...</header> that surrounds the menu.

2. Delete this bit in the file

<style> body { padding-top: 40px; } </style>

3. Change this

class=”navbar navbar-inverse”

to this

class=”navbar navbar-inverse navbar-fixed-top”

That should work out.

Don’t forget to rate 5 stars! Thanks.

Thanks for the reply but unfortunately, it did not work.

I did the following steps:

1. I removed the header class and 2. Changed the class to the one you mentioned above

I searched in all three files for the style you wanted me to delete. There is no such thing.

Any more suggestions?

That body style is in the main html file of the menu. Right before the closing </head> tag.

Can this be easily integrated into the Joostrap Joomla template(http://www.joostrap.com/joomla-bootstrap-rwd-starter-template)? Would you be able to assist for a fee”?

I’ll look into and let you know.

Thanks very much for responding. Since I emailed you, I found the Joomlart T3 blank template that ’s based on bootstrap and has a mega menu.

Really like the look and feel of what you have going here. However wanted to be sure that I am not missing something or am at a wrong URL for the live demo. I have viewed the menu both on my phone and iPad and there are clear issues with it not being what I would consider “responsive”. In vertical mode on the iPad in the high column forms there are items clearly getting cut off. On the phone it is doing the same but much worse. Are there any plans to make these more friendly for the smaller screen sizes? Again, like what you are doing and things look great when within a supported screen size but unfortunately I can not use as it does not meet my needs for the smaller screen size form factors.

Hi, some of the responsive features are not shown on the demo site. Please check out the video to see how it looks on a mobile/tablet size.

Thanks for the reply and referring to the video. I took a look and it definitely helps me understand a little better about how things would look. Would still like to have access to on a live demo site to really get the feel for things but it does the job. Sorry I was not more thorough on my initial look at the page as I did not catch the fact that mobile display was within that video. Thanks again. For $4 I think I will be giving this a shot :)

Are you going to update Megamenu with Bootstrap 2.2.2+ ?

v1.3 has been uploaded and it is compatible with Bootstrap v2.3.1. Just waiting on approval.

Great news!

It’s available for download.

Hello I was wondering, could you integrate this on a WordPress blog?, and can a noobie like me do it?

Sorry this won’t integrate into a WordPress setup. We are working on a plugin, release is expected in a week or two.

I see some issues above with IE8. Are you going to be releasing the new update soon? I would like to buy it if you are.

Also, is there a way with your collapsed mobile menu to have the menu items open to first level only and then accordian open with their submenus only when clicked or collapsed again?

Thanks very much.

Yes, the new update is almost ready. I’ll be uploading it over the weekend.

I’ll see what I can do about the mobile menu collapse request.

That would be awesome. I’ll be watching for the update thank you

can we use this in a theme that i plan to sell on TF if I purchase extended license?

Please contact me via my profile page to discuss this.

Hi.

I’ve an issue. I have made a new css file (min-with 320px) with display: none so the menu only shows when brosing with smartphones… In the computer browser the responsive menu works like a charm but when browsing with my iPhone (chrome and safari) it doesn’t show???

“display: none” would mean nothing would show, that’s probably why you don’t see it.

I forgot to mention that it is working on IE 9 and up. It is not working with IE 8 like you claim it does.

When are you expected to release it? You as of right now are false advertising this product because your product states that it already works with Internet Explorer 8.

Should get uploaded today, it’s a small change to do but I have to update all the files in the package…which is the tedious part.

IE8 is on it’s way out anyway, so it’s more of an inconvenience to support it rather than a feature that allows me to make more sales. Frankly, I’m just doing the change for you, on a $3 item.

I appreciate the support, could you tell me when the update is released? My school’s computers run on Windows XP and unfortunately, IE 8 is as far as XP can handle. Like I said before, the menu works beautifully on everything besides IE 8 and down. Once again, thanks for the support.

Doesn’t work for Internet Explorer
Hello, another problem I am having again. It works and looks great in all other browsers.

Heres the problem: www.dieterich.k12.il.us

How can this be fixed?

Thanks

Can it be used with Wordpress custom menu?

No, this is only CSS. We are working on a WordPress version, should take a couple of weeks more.

I am looking for a wordpress version. Can you guide me in a direction to use it with wordpress if I buy this one.

I was hoping someone can help me.

I need a way to close the menu on a click within the page http://s128211867.onlinehome.us/snaps/# click on pics for jims. click on test. The menu stays open. Any help would be appreciated. Thanks

I wish I could help you, but it doesn’t look like you purchased the item.

Which part do I exactly delete? I also found out that when I delete bootstrap.css, everything works perfectly fine, but I of course need that file to make the mega menu work. Theres something in that CSS file that is causing me not able to resize images within Dreamweaver.

I believe it’s this part:

<!-- You can delete this later --> <style> body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } </style>

I just found a huge problem. In your CSS file, you have a style named “body”. This overrides my other body style in my main HTML document causing me to not be able to resize anything because your body tag is overriding mine. How can I fix this?

If you see the source code of all the files within the folder, you see that it says ”<!- You can delete this later ->”.

So feel free to delete it. I hope it’s not a huge problem to delete a few lines :-)

How can I change the background color of the menu’s when they are clicked/dropped? All color styles seem to have a white background when hovered over. What part of the CSS can I change to make it any color I want?

Thanks in advance!

Dalton

Take a look at the styles.htm file to see how I’ve added styles. You’ll find the relevant CSS class there as well to change the background color. You can then change it to whatever style you like.

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