How to fix navigation menu not shown with full height when mobile toolbar closes

HTML-CSS
1

Hello everybody, I am having a problem with my navigation menu on mobile devices. It works perfectly fine when testing on my computer as the computer doesn’t have a toolbar.

Basically, the problem is that when the toolbar for safari or google chrome on an apple device hides then my container is not at the full height of the device anymore. If the toolbar is visible then my container for the mobile menu is perfectly fine at its set to 100%. Here is a picture reference of what I mean:

mobile menu
mobile menu426×914 165 KB

I have tried using many fixes like using window.innerHeight to set the height of the container using javascript, I also tried using -WebKit-fill-available and setting the height to 100vh. As of now, I have set the height to 100% and it works fine until the toolbar disappears.

2

hello and welcome to fcc forum :slight_smile:

btw, it’s really impossible to say anything about it without actually looking at underlying code for it!! perhaps there is a “codepen or repl” kind of link where people can have a look at it and try to help you fix this…

3

Hey thanks for your reply, I actually managed to fix this issue by adding some padding-bottom to the navbar container. It’s just a temporary fix, but it works for now.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.