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;
}
}
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;
}
}
- Can you show some code please? – funkysoul Commented Feb 22, 2018 at 20:03
- Hi @funkysoul, Added more details in the Question. There is only CSS code, no other coding done. I have directly added new menu item from default wordpress Menu settings from Wp-Admin – Shailesh Commented Feb 23, 2018 at 4:30
1 Answer
Reset to default 1I got it working. It works properly if I use position fixed.
li.app-dl-button{
display: unset !important;
position: fixed !important;
bottom: 0px;
text-align: center !important;
width: 100vw;
background-color: #236df1;
}