Reputation: 69
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><a href="/AboutUs.html">About</a>
</li>
<li><a href="/ContactUs.html">Contact</a>
</li>
</ul>
Upvotes: 1
Views: 14964
Reputation: 729
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><a href="/AboutUs.html">About</a>
</li>
<li><a href="/ContactUs.html">Contact</a>
</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.
Upvotes: 1
Reputation: 185
If you are trying to make the text itself larger you can use the font-size
property.
Upvotes: 0
Reputation: 24559
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><a href="/AboutUs.html">About</a>
</li>
<li><a href="/ContactUs.html">Contact</a>
</li>
</ul>
Upvotes: 2