0

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 Feb 22 '18 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 Feb 23 '18 at 4:30
0

I 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;
      }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.