Menu collapsing from full screen when scrolling down

[tdyrlund]

Hi

I noticed that if I open Porto (http://preview.oklerthemes.com/porto/3.4.1/) in a browser with a small width and then click on the menu and then “PAGES”, then you see a large menu. If you now start scrolling down to see the bottom of the menu, the menu collapses and a new scrollbar is shown for the menu. If you scroll to the top again the menu expands again. This is very confusing and annoying on a mobile phone.

My best guess is that this is because of the header size automatic changing size when scrolling down. How do I change so that the menu is always shown in its full lenght without the extra scrollbar?

Best,

Thomas

---

[Support]

Hello, what you can do is to fix the height of the navigation on mobile devices, please add this:

(css/custom.css):

@media (max-width: 991px) {
	#header .nav-main-collapse {
		overflow-x: hidden !important;
		overflow-y: auto !important;
		max-height: 300px !important;
	}
}

Let me know if you have any questions.

Thanks.

---

[tdyrlund]

With your suggestion I’m setting the menu to have a max height of 300px event hough it might be 600px high. This is not what I want, I want it to alway be shown in it’s full height without the scrollbar.

If I set max-height to e.g. 3000px then the menu is shown in its full size however nothing happens in the menu when I scroll.

---

[Support]

Hello, to use the menu in full height (no scrollbar) you need to disable the sticky menu on mobile devices.

(js/custom.js)

$.extend(theme.StickyMenu.defaults, {
	stickyEnableOnMobile: false
});

(Also, do not use the CSS I sent earlier).

Kind Regard,

Jonas

---

[tdyrlund]

Thanks! Works perfect.

---

[Author]

Posts