When opening the dropdown grid menu (in Layout 4) while the screen size is narrow, the dropdown menu extends past the left border of the screen & half of it cannot be seen. http://tinypic.com/r/2uiynio/9

I have tried without the .pull-right css class, however, that merely makes the dropdown menu go outside the right side of the screen.

Is there any fix to make the dropdowns work on small screen sizes?

Tested on chrome/safari, the box-shadow on app-header works fine, Which browser are you using?

put a .pos-stc-xs class on the dropdown

<li class="nav-item dropdown pos-stc-xs">

Thanks! ‘pos-stc-xs’ works brilliantly.

I am experiencing the box-shadow issue on both Firefox & Chrome on Windows 7.

Screenshot from my local install: http://tinypic.com/r/okvl3r/9 .

Screenshot from the demo at flatfull.com: http://tinypic.com/r/e0ki7p/9

You can see in both where the navbar goes over the content box in the center of the page, the box-shadow on the navbar disappears. Where the navbar is not positioned above an underlying box, its box-shadow is visible.

Another navbar problem. When I am at xs screen sizes, & the navbar menu collapses into the ‘hamburger’ icon, & I expand the menu, then open the megamenu dropdown, the megamenu extends below the bottom of the visible part of the page/viewport. Since the menu is attached to the navbar, which is ‘position: fixed’, it isn’t possible to scroll down to see the bottom half of the mega menu, leaving all those items inaccessible.

Is there a way to fix this, perhaps to make the navbar not ‘position: fixed’ only while the collapsed menu is open? Or some other possible solution? Many thanks.

<div class="app-header navbar-md white box-shadow-z2">

use a custom css on the mega menu

@media (max-width: 767px){
.navbar-toggleable-sm{
   max-height: 300px;
   overflow-y: scroll;
}
.navbar-toggleable-sm .dropdown-menu{
   position: relative;
   float: none;
}
}

Thanks again. Using the custom css for the mega menu plus angular-perfect-scrollbar works great.

Regarding the box-shadow on the navbar, adding box-shadow-z2 allowed me to at least see the shadow over underlying boxes, however, it is just a thin line. Is there any way to make the box-shadow look consistent no matter what it scrolls over?

Another odd css behavior I’ve encountered with the navbar: When on a small screen with the collapsed menu expanded, then resizing to a large screen size, the expanded menu stays expanded as it was in small screen format, rather than going back to a normal large screen layout along the navbar. Layout 4. It happens in both Firefox & Chrome, even in the demo.

Screenshot: http://tinypic.com/r/2rg289v/9

Any ideas? Probably something small like the other issues you helped me with. Thanks again.

why

Uncaught TypeError: Cannot read property ‘apply’ of undefined(anonymous function) ui-jp.js:17(anonymous function) jquery.js:3256fire jquery.js:3099self.fireWith jquery.js:3211deferred.(anonymous function) jquery.js:3301fire jquery.js:3099self.fireWith jquery.js:3211deferred.(anonymous function) jquery.js:3301script.onload @ ui-load.js:50

This page of the JS I how to integrate into the config.lazyload.js inside and such as call out

Can you help me to write an example? Thank you very much

ui-jp only support standard jquery plugin, eg your plugin name called “pluging”, <div id=”element”ui-jp=”pluging”> will call $(’#element’).pluging(‘option’);

code from your link is not a plugin. can not use ui-jp.

My English is very poor, I can’t understand what you said. Can you help me to write a complete example?

My English is very poor, I can’t understand what you said. Can you help me to write a complete example?

function MLMenu(el, options) {}

(function($, MLMenu){
$.fn.MLMenu = function(params)
    {
        return this.each(function() {
            MLMenu(this, options);
        });
    };
})(window.jQuery, window.MLMenu);

then config these files in the config.lazyload.js and use <div ui-jp=”MLMenu”> to call it.

Thank you very much; you’ve done me a great service. But I still don’t understand. I’m so stupid.

Thank you again.

(function($, MLMenu){
$.fn.MLMenu = function(option)
    {
        return this.each(function() {
            MLMenu(this, option);
        });
    };
})(window.jQuery, window.MLMenu);

I will not

Help me write a complete example of it, thank you very much

1. save the http://tympanus.net/codrops/2015/11/17/multi-level-menu/ js code to mlmenu.js

2. save the mlm css style to mlmenu.css

3. save (function($, MLMenu){ $.fn.MLMenu = function(option) { return this.each(function() { MLMenu(this, option); }); }; })(window.jQuery, window.MLMenu); to mlmenu.jquey.js

4. config it in the (angular/html/)scripts/config.lazyload.js.

{ name: ‘MLMenu’, module: false, serie: true, files: [ ’../libs/jquery/mlmenu/mlmenu.css’, ’../libs/jquery/mlmenu/mlmenu.js’, ’../libs/jquery/mlmenu/mlmenu.jquey.js’ ] }

5. on your page <div ui-jp=”MLMenu”></div>