CODEWITHSUNDEEP
cssbutton
Sarah Rose
Sarah Rose

Reputation: 3

Issue: Cannot Stack Buttons Vertically

Very new to HTML and CSS - I can't seem to get these navigation buttons to stack in a vertical column, for say a mobile layout. Thought display:block would do the trick but its not. I don't think my html is picking up any of my .btn attributes.

![Buttons won't stack vertically][1]

.nav  {
     display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    list-style-type:none;
    font-weight: bold;
    font-size: 70%;
    color: #FFFFFF;
    background-color: #2b5429;
    font-family: 'Lato', helvetica, sans-serif;
    vertical-align: middle;
    position: sticky;
    line-height: 40px;
   
}
.btn {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0px;
    background-color: #2b5429;
    color: #ffffff;
    font-family: 'Lato', helvetica, sans-serif;
    vertical-align: middle;
    position: sticky;
    text-align: center;
    line-height: 40px;
}
<nav class="btn nav">
<a href="index.html"><button>Home</button></a>
<a href="activities.html"><button>Activities</button></a>
<a href="about.html"><button>About</button></a>
<a href="animalfacts.html"><button>Animal Facts</button></a>
</nav>

Upvotes: 0

Views: 384

Answers (2)

Gezzasa
Gezzasa

Reputation: 1453

Try using html lists for your navigation.

ul {list-style: none; margin: 0; padding: 0;}

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="activities.html">Activities</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="animalfacts.html">Animal Facts</a></li>
</ul>

http://jsfiddle.net/wzrx9ea1/

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

a is inline by default and if you want it to be block-level then define it:

.nav a{
  display: block;
}

Upvotes: 2

Related Questions