How to change size of Nav bar - html

Question

All the questions I've looked at refer to WordPress or Bootstrap (what is that?) nav bars, I have made mine using CSS.
I would like to make my nav bar bigger so that it's easier for mobile users to click the correct link. I've tried using the height: px; but all that did was push the text below further down.
What do I use to change the size of the buttons themselves? included my CSS below.
html{background:gray;}
ul {
left: 0;
top: 50%;
width: 100%;
text-align: center;
display: inline-block;
list-style-type: none;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin: 0
}
li a:hover:not(.active) {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>

Answer 1

Please note I have added backgrounds in order to display the navbar, and are not required in production
You are OK to use the ul and li elements within your code. In order to make the navbar appear 'taller', you would need to set both the height of the ul element itself, as well as the child li. A quick demo has been provided below.
I have given the height of the ul element 100px, although this value can be changed to your preference. Note you may also want to change line-height property of your a elements to suit this.
html,body {
background: gray;
margin:0;
padding:0;
}
ul {
left: 0;
top: 50%;
text-align: center;
display: block;
list-style-type: none;
background: dimgray;
height: 100px; /* <-- change this line*/
}
li {
display: inline-block;
height: 100%;
}
li a {
display: inline-block;
color: white;
background: lightgray;
line-height: 100px; /* <-- change this line*/
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
margin: 0;
height: 100%;
}
li a:hover:not(.active) {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>

Answer 2

What do I use to change the size of the buttons themselves?
Add more padding! Take a look-see.
body {background-color: gray;}
ul {
left: 0;
top: 50%;
width: 100%;
text-align: center;
display: inline-block;
list-style-type: none;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 2em; /* bigger button? add more padding! */
text-decoration: none;
margin: 0
}
li a:hover:not(.active) {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
There are many ways to increase the size of the link. This is just one way. jbutler's answer is a good way too. It just depends on what exactly you want it to do.
Hope this helps.

Answer 3

If you are trying to make the text itself larger you can use the font-size property.