HTML Bottom Navbar gets influenced by smartphone keyboard

Asked May 27 '20 at 20:00

Active May 28 '20 at 16:13

Viewed 425 times

I have the following Navbar on the bottom of my website: (from w3schools)

html

</div>
<div class="navbar">
<a href="WEBSITE_LINK"
 class="active">Home</a>

  <a href="#WEBSITE_LINK">News</a>

 <a href="WEBSITE_LINK">Site Notice</a>

</div>

css

.navbar {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
.navbar a.active {
  background-color: #ca3160;
  color: white;
}

If the smartphone user wants to type something in my textfield (above the navbar), the navbar gets pushed up by the upcoming keyboard. Therefore nearly the whole screen is blocked by the keyboard and the navbar. So how can I fixate the Navbar to the bottom even if I open the "keyboard"? Thank you for reading.

edited May 28 '20 at 16:13

asked May 27 '20 at 20:00

Boritobison

Set the HTML `body`'s height to `100vh`. – Daemon Beast May 27 '20 at 20:07
Post the CSS that you are using. – Zach P. May 27 '20 at 20:50
wow i actually forgot about the CCS file. Its here now. – Boritobison May 28 '20 at 10:29
@Zera it didnt change anything sadly – Boritobison May 28 '20 at 15:32
Is the formatting error in your HTML also in your real code? – Daemon Beast May 28 '20 at 15:34
Its not. and its embarrassing that i pastet 2 wrong codes. sorry for that – Boritobison May 28 '20 at 15:46
We all make mistakes, and it seems you left another one; there is an extra `>` before `class`. – Daemon Beast May 28 '20 at 16:12
ok so by the looks of it i messed up when I changed the link to `WEBSITE_LINK` I dont have an error in my real files sadly – Boritobison May 28 '20 at 16:15
Possible duplicate: [How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?](https://stackoverflow.com/questions/15273098/how-do-i-stop-my-fixed-navigation-from-moving-like-this-when-the-virtual-keyboar) – Daemon Beast May 28 '20 at 17:06

HTML Bottom Navbar gets influenced by smartphone keyboard

0 Answers0