Skip to main content
LGMTL
LGMTL
Inspiring
June 18, 2017
Answered

Component is not fully compatible with the current Bootstrap - 2017

  • June 18, 2017
  • 2 replies
  • 1689 views

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

    This topic has been closed for replies.
    Correct answer Nancy OShea

    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


    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.

    <!-- Latest compiled and minified Bootstrap CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!--Compiled & minified  jQuery-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

    </script>

    <!--Compiled & minified Bootstrap-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    Nancy

    2 replies

    Nancy OShea
    Nancy OShea
    Community Expert
    June 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
    BenPleysier
    BenPleysier
    Community Expert
    June 18, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    LGMTL
    LGMTLAuthor
    Inspiring
    June 18, 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.

    Nancy OShea
    Nancy OShea
    Community Expert
    June 18, 2017

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


    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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices