Landing page with dropdown nav using plain JS

@hebrerillo Thank you for alerting me to this! I had changed the structure I used in my other project and had forgotten about this issue, and I ended up changing the structure there as well so I forgot what I did. 😅

I just had a look at your code and site as well, which I'll keep as a reference. Thanks again for helping me check! 😊

@hebrerillo I just fixed the height issue; it turns out I needed a function as well, which I think is also something you had in your code. So anyway I added one as a temporary fix and will experiment more later as I'm not entirely satisfied with the temp fix yet. If you happen to test it again on your device, let me know if the bar stretches to the bottom. Thanks!

@elaineleung yes! You fixed it ;)

But you did not need any JavaScript to fix it at all. Just by setting the popup to an absolute position is enough.

The JavaScript I have in the HTML file is to calculate the minimum height of the document on mobile devices. That is because I want the footer to stick to the bottom.

If you open my solution and remove the button, the central image or the text from the HTML, you will realize that the footer still sticks to the bottom (only for mobile). When I tested that on the responsive mode of Firefox, everything was working. But when I tested it on a real mobile device, the footer was hidden because of the address bar of mobile devices, which is included in the view port height.

The JavasScript code subtracts the height of the address bar from the minimum height of the document. That way, the footer is always visible :)

I am going to document this in the file.

@hebrerillo The position: absolute alone did not work for me; while it was able to scroll, the background color gets cuts off at the bottom regardless whether I use min-height or height at 100vh or 100%. But I figured it out in the end with something else without needing JS; I just added bottom: 0 and with overflow-y:auto, and the nav can scroll whether I use position fixed or absolute.

Yes, the mobile missing/covered footer has been a longstanding topic of discussion in a few places I've seen! I saw an interesting solution to it recently that I haven't yet tried out but would love to soon.

@elaineleung I am glad you managed to fix it!

By the way, could you please tell me about the solution to fix the footer problem on mobile screens? I am very interested!

I also tried to use 'min-height: -webkit-fill-available;', as explained here: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/

But I wasn't able to get it to work :(

Thanks a lot in advance!

@hebrerillo I've also seen the fill available solution, haven't fully tested it out yet. About the footer solution, here's the link if you're interested: https://dev.to/fenok/stretching-body-to-full-viewport-height-the-missing-way-2ghd. Let me know if you manage to get it to work!

@elaineleung thank you so much!! I will give it a try and will let you know ;)

@ghintema Thank you Harm, and yes I did notice it already even in the React version I built before this one. I may have found a solution to the problem and will try it out in the days to come. Anyway, I appreciate the mention!

@elaineleung I may get back to you for the solution in the future when I start working with js-react... :)

@yacineKahlerras Thank you Yacine! Yes, that's a good idea; I only had the action on the links where clicking the links would close the dropdowns, but I think your suggestion is needed as well. I'm continually adding/fixing this solution when I have the time, so will keep this mind for sure!

@joanFaseDev Thank you Jordan, happy coding to you also!