Component is not fully compatible with the current Bootstrap - 2017

Report · Jun 17, 2017

I noticed that I'm getting an error when I try to add a Bootstrap component and found out it was a conflict between another bootstrap.css that's from the Smartmenu Navbar. I need this for the mobile navigation menu.

When I remove the Smartmenu stylesheet I no longer get the error message:

"The component is not fully compatible with the current Bootstrap CSS/JS File (lower than 3.0) A new Bootsrap CSS/JS File will be created and linked from the document."

Since both are linked via CDN, what's the best way to resolve this, should I find the differences between the 2 CSS files and add those to my custom CSS stylesheet then remove the Smartmenu CSS?

Brandon

Report · Jun 17, 2017

One way out of this is to have two menus, one Smartmenu and one Bootstrap menu. You can hide the menu that you do not want to appear in certain screen sizes.

Wappler, the only real Dreamweaver alternative.

Report · Jun 17, 2017

Thanks for your reply Ben. If I have both menus would I not still have the two CSS files? I'm trying to add Bootstrap components without getting the error above and the only way would be to remove the Smartmenu bootstrap css, my though was to use a diff tool to see what the differences are between the 2 then copy the difference to my custom CSS and just have one bootstrap.css file.

Report · Jun 17, 2017

I am sorry, I am not up to date with Smartmenu,

I started writing a whole book with possible solutions, when I thought it best if you posted a copy of the code prior to adding the Bootstrap menu. That way I can have a gander myself.

Wappler, the only real Dreamweaver alternative.

Report · Jun 17, 2017

Sure so basically Smartmenu is a Bootstrap addon to Boostrap Navbars, more info here:

SmartMenus jQuery Website Menu - Bootstrap Addon - Navbar

Here's the URL http://www.supremem.com/new_2017/navbar.html

You can find the 2 CSS files on line 3 and 5:

[PHP]  <link href="//netdna.bootstrapcdn.com/font- - Pastebin.com

It's kinda nice to have just one menu that works across all resolutions, but the issue I'm having is I can't add Bootstrap components without getting the error so I have to sort of write it in manually. Once I remove the Smartmenu Bootstrap CSS I no longer see the error but I still get the javascript alert so I'll have to deal with that one later as well.

Edit: Oh, and the reason I'm using Smartmenu is because I need submenus, the default Bootstrap navbar doesn't support it.

Brandon

Report · Jun 17, 2017

Because Smartmenu is an addon to Bootstrap, you must first load Bootstrap CSS prior to loading Smartmenu CSS.

The JS files have been loaded in the correct order.

Wappler, the only real Dreamweaver alternative.

Report · Jun 17, 2017

Thanks Ben, that seemed to have worked. So the add-on should load and overwrite bootstrap, right that makes sense. By the way I made a mistake it wasn't a js alert but a jquery alert http://prntscr.com/fl47or

I tried changing the order of when jquery loads but nothing seems to work. Here's the markup in case you need: [PHP] <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta htt - Pastebin.com

Report · Jun 17, 2017

The correct order is

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/jquery.smartmenus.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/addons/bootstrap/jquery.smartmenus.bo..."></script>

Load order:

jQuery

Bootsrap (needs jQuery)

Smartmenu (needs jQuery)

Smartmenu.Bootstrap (needs Smartmenu)

Wappler, the only real Dreamweaver alternative.

Report · Jun 17, 2017

Thanks Ben. I'm still getting the error so I'm guessing it's a compatibility issue. I read that Jquery 3 isn't compatible with Bootstrap 3 so perhaps thats what's causing the Alert because I've included a version of Jquery that's higher than 1.9 but lower than 3 yet it still gives that message but thanks for all your help in this, I appreciate it!

Brandon

Report · Jun 18, 2017

Smartmenu looks to be about 3-4 years behind.

I'm using BS 3.3.7 (the latest stable release) with jQuery 1.12, I also use integrity checks as it's recommended now.

</script>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 18, 2017

Yup thanks, too bad Bootstrap no longer supports multilevel submenus.

Report · Jun 18, 2017

The prevailing theory now is to keep navigation a simple as possible. I don't use multi-level menus if I can possibly avoid them for usability reasons. They are too unwieldy on mobile devices. One level drop-down is about as far as I care to take it. After that, it's too complicated for small screens.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 18, 2017

Agreed. I think the dropdown + 1 submenu level would be ideal but BS doesn't allow for it and smartmenu is the best I was able to find so far without having to create an entire new menu like slicknav which I find takes longer to customize.

Report · Jun 18, 2017

You can make your own without a plugin.

Bootstrap Snippet Multi level dropdown menu BS3 using HTML CSS | Bootsnipp.com

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 18, 2017

What I like about the BS navbar is that the mobile 'hamburger' menu is already integrated, I'm lazy

Report · Jun 18, 2017

Simply put the dropdown into your main navbar. Problem solved.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 18, 2017

I'll give it a shot thanks!

Report · Jun 18, 2017

That menu is really unstable on Mac Firefox 53, it's jumping and sliding all over the place.

http://www.supremem.com/new_2017/navbar.html

It appears to be fine in Chrome though.

Report · Jun 18, 2017

Damn, ok I'll have to look into that, thanks!

Report · Jun 18, 2017

There was an update for SmartMenu v1.0.1 which contains some CSS bug fixes.

SmartMenus jQuery Website Menu Plugin » Blog

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Component is not fully compatible with the current Bootstrap - 2017

1 Correct answer