Misplaced first level menu when scrolling

Home Forums Older releases 0.9.x Misplaced first level menu when scrolling

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1330
    CCharabaruk
    Participant

    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?

    #1604
    admin
    Keymaster

    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.

    #1605
    CCharabaruk
    Participant
    #1606
    CCharabaruk
    Participant

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

    #1608
    admin
    Keymaster

    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!

    #1609
    CCharabaruk
    Participant

    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?

    #1610
    admin
    Keymaster

    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.

    #1612
    CCharabaruk
    Participant

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?