Got mobile menu button at the bottom of screen. How to deal with iPhone bottom home bar?

Our mobile menu button is on the bottom of the screen, which overlaps with the home bar on some iPhones. This is particularly problematic on mobile landscape.

Right now, on the homepage, we took into consideration of the home bar by adding some bottom padding, changing how we align the items etc. So it looks ok. See below for example.

This is the code we used {trying out with iPhone 13 device only to test for now):

@media only screen and (device-width: 390px) and (device-height: 844px) and (orientation: landscape)
.navbar.small-dsktp-breakpt {height: 49px; align-items: start}
.nav-links-wrap.desktop {padding-bottom: 10px;}

But if someone’s device doesn’t have the home bar at the bottom, or upon scrolling and the home bar disappears, the mobile menu button will have a lot of excess bottom padding, like this:

We aren’t coders. Is there a way that would allow the mobile menu padding settings to auto adjust depending on whether there is a home bar at the bottom?

Thanks so much!

Our read-only is here