smartmenus | Mobile | Plugin library

I have created a website with a sticky hamburger menu on mobile. I checked how it looks both of iPhones and Androids and found out that it looks slightly weird on iPhone.

Left is how it looks like on Android (LG G7 & G6) which is the right way:

Right is how it looks like on Safari (iPhone):

I want it to look like the Android version (without the wide, weird background).

Could anyone please tell me how to make it look rounded on Safari browser on iPhone devices?

For a new project, I am using Bootstrap 3 with the SmartMenus addon for the submenus.

My problem is that on Chrome (v 58), the caret on the links that have a submenu is disappearing on load, the submenus are showing on click instead of hover, and they are not closing when another is opened.

I have found where this issue comes from though. The class .sm-collapsible is applied to my ul.navbar-nav element on load. BUT, it's applied only if the ul.navbar-nav element has a display:flex; AND on Chrome. I tried to reproduce my layout with display:table; and display:table-cell; and it's also not working.

So this isn't particularly a flex problem, but it comes from the layout and it messes the JavaScript.

I have no idea why or how it's even possible.

You can check an online version here : https://lesdeuxvagues.com/laloupe (hover/click on Catalogues to see the issue)

Thanks in advance... i'm really stuck here.

EDIT
I just found the responsible JS line that adds the .sm-collapsible class. Here it is:
obj.isCollapsible = function() { return !/^(left|right)$/.test(this.$firstLink.parent().css('float')‌​);};

It returns true all the time on Chrome (when display:flex; is not commented) but only on mobile for Firefox and Edge.

Need Some help here please.

Question:- 1)PROPER EVENT BINDING: Consider using the preferred .on() method rather than .click(), .bind(), .hover(), etc. For best performance and concise code use event delegation whenever possible

2)STRICT EQUALITY COMPARISON: For better performance please use Strict Equality Comparison.

I have no idea what to do actually and would appreciate some help.

This is my code (it’s quite long sorry):

Search Js:

I have a SmartMenu in a web app which I need to test with Selenium. I can find the root menu items by partial link text but none of the sub menu items can be found.

Has anyone found a way to do this?

Here is my code:

I've searched through several questions and still having trouble. I'd really appreciate some expertise from y'all. =)

The child theme created and activated on my WordPress site seems to be enacting no changes.

I know essentially zero PHP but trying to use the functions.php instead of @import since it's supposed to be a better load time.

Here's what I have in my child theme's directory style.css (first) and functions.php (second)

I wanted to put this navbar Here is the Link in my Liferay 7 portal theme ( using freemarker ).

The problem is i cant have that (+) in dropdown button in mobile screens.

My navigator console shows :

Mismatched anonymous define() module: jquery,jquery.smartmenus

Mismatched anonymous define() module: jquery

Here is my code :

In a Grails-project I want to use NAVBAR(BootStrap) with multilevel dropdown menus and googling around let me know that I should use smartmenus to make it work. I found it very hard to find any example that could give me a clue, I think most of them is to old and doesn't work with the latest version of grails and bootstrap.

I've downloaded (cloned a git-repository) smartmenues and found a lot of scripts and stylesheets. But all is just confusing to me.

I would be very happy if I could get some help to put me in the right direction. //LG

OK, I created a new grails-project(testMultiLevel) and modified the index.gsp as: