How to add a button to the bottom of the Mobile Menu.
The way I'm currently implementing it,
- I'm using the last item on the Menu as my Button(after styling it with CSS)
- Have made it position Absolute and made the height of Mobile 100vh
- Now on different browsers(Safari/Chrome/Firefox) & different mobiles(iPhone/Android) the actual viewable screen size is different than the Device Screen Height (100vh)
- So I have set the Bottom value of the Bottom button with an offset of 131px. However, this is giving me a white gap after the Button(my Mobile Menu background is white)
How do I set the Button to exactly sit in the Bottom with zero pixel gap after the Button?(for all mobile devices & all mobile browsers)
More details:
Button is just a new Custom Menu Item added via Wordpress Menu Settings section from WP-Admin. And have applied .app-dl-button class to it.
CSS Code:
@media only screen and (max-width: 500px) and (min-width: 300px) { #header{ height: 56px; } #mainnav-mobi{ height: 100vh; } li.app-dl-button{ display: unset !important; position: absolute !important; /*adding important as conflicts with CSS in main.css*/ bottom: 131px; /*56px is height of Header menu and 50px additional required for addressbar*/ /*bottom: 106px;*/ /*56px is height of Header menu and 50px additional required for addressbar*/ /*bottom: 81px;*/ /*56px is height of Header menu and 25px additional required for addressbar*/ text-align: center !important; /*conflicts with CSS in main.css*/ width: 100vw; background-color: #236df1; } li.app-dl-button:after{ content: url(https://pathto/download-arrow.svg); position: absolute; z-index: 100000; left: 28vw; top: 15px; } } 