Stewart Hering Stewart Hering - 3 months ago 13
CSS Question

CSS cannot pad text within a nav bar defined as an unordered list

I have a website with a nav bar defined using a few divs and an unordered list.

<!--Nav Bar-->
<div class="nav-blur"></div>
<div class="nav">
<img class="logo" src="img/rectangle.png">
<ul class="links">
<li class="link text"><a href="#">Home</a></li>
<li class="link divider">&nbsp;|&nbsp;</li>
<li class="link text"><a href="#">About Us</a></li>
<li class="link divider">&nbsp;|&nbsp;</li>
<li class="link text"><a href="#">Contact Us</a></li>
<li class="link divider">&nbsp;|&nbsp;</li>
<li class="link button"><a href="#">Get Started</a></li>
</ul>
</div>


Currently, the last link in the nav bar is a button, different from the others which are plain text.

Nav Bar Example Image

Here is my CSS to style such:

.nav-blur {
width: 100%;
height: 45px;
position: fixed;
top: 0px;
-webkit-filter: blur(10px);
filter: blur(10px);
background-color: rgba(0, 0, 0, 0.6);
}

.nav {
width: 100%;
height: 45px;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0px;
}


.nav .logo {
padding-left: 20px;
padding-top: 1px;
height: 95%;
width: auto;
}

.nav .links {
list-style-type: none;
margin: 0;
padding: 11px;
padding-right: 30px;
float: right;
}

.nav .divider {
color: whitesmoke;
}

.nav .links .link {
display: inline;
}

.nav .links .link a {
color: whitesmoke;
text-decoration: none;
font-style: normal;
}

.nav .links .link a:hover {
color: grey;
text-decoration: none;
font-style: normal;
}

.nav .links .button {
background-color: rgba(103, 155, 193, 1);
border-radius: 5px;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

.nav .links .button:hover {
background-color: rgba(103, 155, 193, 0.5);
border-radius: 5px;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

.nav .links .button a {
padding-right: 7px;
padding-left: 7px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}


My current problem is that although I can adjust the padding both right and left of the text inside the button I cannot adjust the padding vertically. I have tried to add the spacing I need with both padding and margins neither of which have any effect.

.nav .links .button a {
padding-right: 7px;
padding-left: 7px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}

.nav .links .button a {
padding-right: 7px;
padding-left: 7px;
margine-top: 5px;
margine-bottom: 5px;
text-align: center;
}


I have also tried incasing the text inside a spereate div which managed ro royally mess up my nav bar.

What CSS would I need to add inorder to give some verticle padding to my text inside the button?

Answer

Vertical padding is ignored by inline elements...which is the default display type of anchor links.

Set the links (and the li) to display:inline-block.

.nav .links .link a {
    color: whitesmoke;
    text-decoration: none;
    font-style: normal;
    display:inline-block;
}

.nav .links {
  list-style-type: none;
  margin: 0;
  padding: 11px;
  padding-right: 30px;
  float: right;
  background: #000;
}
.nav .divider {
  color: whitesmoke;
}
.nav .links .link {
  display: inline-block;
}
.nav .links .link a {
  color: whitesmoke;
  text-decoration: none;
  font-style: normal;
  display: inline-block;
}
.nav .links .link a:hover {
  color: grey;
  text-decoration: none;
  font-style: normal;
}
.nav .links .button {
  background-color: rgba(103, 155, 193, 1);
  border-radius: 5px;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}
.nav .links .button:hover {
  background-color: rgba(103, 155, 193, 0.5);
  border-radius: 5px;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}
.nav .links .button a {
  padding: 7px;
  text-align: center;
}
<div class="nav">
  <ul class="links">
    <li class="link text"><a href="#">Home</a>
    </li>
    <li class="link divider">&nbsp;|&nbsp;</li>
    <li class="link text"><a href="#">About Us</a>
    </li>
    <li class="link divider">&nbsp;|&nbsp;</li>
    <li class="link text"><a href="#">Contact Us</a>
    </li>
    <li class="link divider">&nbsp;|&nbsp;</li>
    <li class="link button"><a href="#">Get Started</a>
    </li>
  </ul>
</div>