Misplaced first level menu when scrolling

[CCharabaruk]

I’m having another issue, this time with the scrolling for first level submenus. Second level and beyond work just fine, but when the scrollers are necessary for the first level, the result is like this:

In addition, the submenu itself gets scrolled off the top of the page, with the top scroller span remaining invisible (possibly due to being offset like the bottom scroller).

I can’t see any styling that would be causing this to happen, and I’m not manually shifting them (I tried doing that in the show event but to no avail; the submenu itself continues to scroll as before). Any ideas as to what the issue may be with the first level submenus?

[admin]

Unfortunately, it’s really difficult to guess what exactly might be causing the issue without being able to test your exact code so, if possible, please post an URL to a live demo that I could test (you can post it as Protected data if you would like to keep it private between us.)

I will take a look and try to figure out what’s causing the problem.

[CCharabaruk]

[CCharabaruk]

Further detail: it only occurs when the browser viewport is less than 473px.

[admin]

OK, this seems to happen because you use some funky styling for the main menu items (e.g. the item links are absolute positioned inside the LI’s, etc. which breaks the positioning calculations). So to fix the issue, you could do the following:

1) In the following file:

a) instead of this option:

mainMenuSubOffsetY: $('header').height() - parseFloat($('#main-menu > li').css('padding-top')),

pass this:

mainMenuSubOffsetY: 1,

b) remove the following (you won’t need it any more):

    $(window).resize(function () {
        console.log("START window resize for main menu");
        var sm = $('#main-menu').data('smartmenus');

        sm.opts.mainMenuSubOffsetY = $('header').height() - parseFloat($('#main-menu > li').css('padding-top'));
        //sm.opts.subMenusSubOffsetY = $('header').height() - parseFloat($('#main-menu > li').css('padding-top'));

        $('#main-menu').data('smartmenus', sm).smartmenus('refresh');
        console.log("END-- window resize for main menu");
    });

2) In the following file:

a) remove the padding-top declarations in these rules:

			header nav ul.menu > li {
				width: 16.5%;
				height: 100%;
				padding-top: 4%;
				position: relative;
				float: left;
				line-height: 1.3;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}	
			@media (min-width: 1550px) {
			header nav ul.menu > li {
				padding-top: 47.265625px;
				width: 195.015625px;
			}
			}

b) replace the following rule:

				header nav ul.menu > li > a{
					z-index: 10;
					position: absolute;
					top: 0px;
					bottom: 0px;
					right: 0px;
					left: 0px;
				}

with the following:

				header nav ul.menu > li > a{
					height:100%;
				}

c) replace the margin-top declaration in the following rule:

					header nav ul.menu > li > a > div{
						...
						margin-top: 23.265625%;
					}

with a top declaration like this:

					header nav ul.menu > li > a > div{
						...
						top: 30%;
					}

These should fix the issue and will also simplify a bit your JS code. Let me know if you have any questions.

Cheers!

[CCharabaruk]

Thanks. That mostly does the trick, but the first level menus continue to cover the header in this case and won’t scroll off. There’s a usability issue from this since a lot of the items at the top of each of the first level subs have submenus of their own, making it that a user can’t easily mouse over to the neighbouring top level menu items. Is it possible to keep the submenus below main menu items at the same time?

[admin]

It’s not a problem to set something like:

position:relative;
z-index:20000;
background:red; /* just for the test, of course */

for your main menu items’ links but, as I mentioned, the scrolling feature for the sub menus only works against the viewport so you will have troubles accessing the top items once a sub menu is scrolled up since they would appear beneath your main menu items.

So, unfortunately, this cannot be achieved with the current code. But I’ve now thought about the scrolling feature a bit more and it might actually be possible to achieve what you would like for horizontal main menus – i.e. we could use an additional clipping container (appended in the main menu items’ LI and wrapping its child UL) displayed right below the main menu, taking the full width of the viewport and the remaining height below the main menu and then we could display and scroll if needed all the sub menus inside it. On theory this should work as I am thinking although it will probably be a bit tricky to implement and might break some user CSS since we would dynamically add another wrapper DIV that users wouldn’t be aware of. But anyway, this is something I could try to implement in a future release.

[CCharabaruk]

That’d be good. For now, though, we’ve told the client they’re just going to have to live with things as they are.

[Author]

Posts