Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Re: Misplaced first level menu when scrolling

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

#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!