Nav menu on small mobile height device forces users to scroll; confusing

[Support]

I need all menu items to show all at once to the user in my nav. On smaller screens, it crops it at 50% vh which means half the menu items are not shown to the user and they don’t realize there are more options in the nav unless they figure out they have to drag scroll to see the rest. I’d like all menu items to show by default; I suppose this means that I have to turn off sticky header as well? Please help!

I own a current license and 4 months more support remaining from themeforest.

---

Template Version: Latest

[Support]

Hello,

Please try removing the max-height with the code below at (css/custom.css):

@media (max-width: 991px) {
	#header .header-nav-main nav {
		max-height: none;
	}
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Support]

Yes, this does maximize it, but then if the screen height isn’t large enough to display all the items, then it permanently shows off-screen with no way to scroll down. Do I need to turn Sticky header off then? How do I do that?

---

[Support]

Hello,

Right, to prevent this issue we need a media querie checking the height. Please maintain the first CSS code we sent for you and add this new below:

@media (max-width: 991px) and (max-height: 540px) {
	#header .header-nav-main nav {
		max-height: 50vh;
	}
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts