CODEWITHSUNDEEP
htmlcssmenu
newbie
newbie

Reputation: 468

Increase menu width to page size

I'm trying to create a menu which stretches across the page. However, it's not stretching across the screen, even when I make the width 100%.

Here's my code:

select {
  display: none;
}
nav {
  margin: 0 auto;
  text-align: center;
  background: #fff;
  height: 70px;
  width: 100%;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: top;
  background: rgba(148, 148, 149, 1);
  background: -moz-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148, 148, 149, 1)), color-stop(36%, rgba(192, 192, 192, 1)), color-stop(100%, rgba(192, 192, 192, 1)));
  background: -webkit-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
  background: -o-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
  background: -ms-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
  background: linear-gradient(to bottom, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0);
}
nav ul li {
  float: left;
  margin: 0;
  padding: 0;
}
nav ul li a {
  display: block;
  padding: 10px 7px;
  color: #000;
  text-decoration: none;
}
nav ul li~li {
  border-left: 1px solid #857D7A;
}
nav .active a {
  background: rgba(180, 85, 12, 1);
  background: -moz-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(180, 85, 12, 1)), color-stop(36%, rgba(234, 110, 16, 1)), color-stop(100%, rgba(234, 110, 16, 1)));
  background: -webkit-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
  background: -o-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
  background: -ms-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
  background: linear-gradient(to bottom, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#b4550c', endColorstr='#ea6e10', GradientType=0);
  color: #fff;
}
@media (max-width: 480px) {
  select {
    display: block;
    width: 200px;
    margin: 0 auto;
  }
  nav {
    display: none;
  }
}
<nav>
  <ul>
    <li class="active"><a href="#">Item 1</a>
    </li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a> 
    </li>
    <li><a href="#">Item 4</a>
    </li>
    <li><a href="#">Item 5</a> 
    </li>
  </ul>
</nav>

<select>
  <option value="#">Item 1</option>
  <option value="#">Item 2</option>
  <option value="#">Item 3</option>
  <option value="#">Item 4</option>
  <option value="#">Item 5</option>
</select>

Upvotes: 1

Views: 66

Answers (2)

Munir
Munir

Reputation: 51

Check this Codepan. You need to change this.
nav ul
{
width:100%
}

Upvotes: -1

Andy Holmes
Andy Holmes

Reputation: 8047

You just need to add width: 100%; to your nav ul like this:

nav ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148,148,149,1);
background: -moz-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,149,1)), color-stop(36%, rgba(192,192,192,1)), color-stop(100%, rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0 );
}

If you want the buttons to expand, you need to use display: table; on the nav ul followed by display: table-cell; on the nav ul li

Here is a fiddle for you showing it working - http://jsfiddle.net/andyjh07/Ldu3o1jm/

Upvotes: 3

Related Questions