CODEWITHSUNDEEP
htmlcss
Gg8
Gg8

Reputation: 69

How to change size of Nav bar

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

Answers (3)

UndoingTech
UndoingTech

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

JKFrox
JKFrox

Reputation: 185

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

Upvotes: 0

jbutler483
jbutler483

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

Related Questions