How can I style this HTML5 navigation bar? [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is my code for navigation:
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME</li>
<li>COMPANY</li>
<li>MARKETS/SOLUTIONS</li>
<li>PRODUCTS/SERVICES</li>
<li>BUSINESSES</li>
<li>INVESTORS</li>
</ul>
</nav>
</header>
</div>
*{
box-sizing:border-box;
}
body{
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper{
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
}
nav ul li{
display:inline-block;
padding:15px;
}
nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover{
text-decoration: underline;
background-color:none;
}
nav ul li:hover{
background-color:#000;
}
Demo on JSfiddle
If I put width:960px; for the wrapper, it will cut the margin on both sides. I need to avoid using text-align:center; for nav ul because of what happens when the window is resized. When the window is shrunk, lists should be center aligned; in window of normal size, lists should be displayed in the left side of the navigation bar.

Answer 1

JSFiddle - DEMO or SHOW [EDITED]
You could use CSS3 #media queries for small screen sizes.
HTML:
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME
</li>
<li>COMPANY
</li>
<li>MARKETS/SOLUTIONS
</li>
<li>PRODUCTS/SERVICES
</li>
<li>BUSINESSES
</li>
<li>INVESTORS
</li>
</ul>
</nav>
</header>
</div>
CSS:
* {
box-sizing:border-box;
}
body {
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper {
max-width:100%;
margin-left:auto;
margin-right:auto;
text-align: center;
}
nav ul {
background-color: red;
}
nav ul li {
display:inline-block;
padding:15px;
}
nav ul li a {
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover {
text-decoration: underline;
background-color:none;
}
nav ul li:hover {
background-color:#000;
}
#media (max-width: 960px) {
nav {
text-align: left;
}
}

Answer 2

Here is what you looking for http://jsfiddle.net/adarshkr/ubz7Lcft/9/
Style your CSS using media quires
Changes made
.wrapper{
width:100%; /*takes full width*/
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
text-align:left; /* for normal view */
padding-left:0
}
#media(max-width:992px){
nav ul{
text-align:center /* for resize */
}
}

Answer 3

First correct the spelling of wrapper and then set its width to 80%.
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME</li>
<li>COMPANY</li>
<li>MARKETS/SOLUTIONS</li>
<li>PRODUCTS/SERVICES</li>
<li>BUSINESSES</li>
<li>INVESTORS</li>
</ul>
</nav>
</header>
</div>
*{
box-sizing:border-box;
}
body{
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper{
width:80%;
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
}
nav ul li{
display:inline-block;
padding:15px;
}
nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover{
text-decoration: underline;
background-color:none;
}
nav ul li:hover{
background-color:#000;
}
Demo on JS Fiddle

Answer 4

Changed made in CSS
nav {
background-color: red; /*apply color for nav instead of ul */
}
nav ul{
text-align:left;
padding-left:0
}
#media(max-width:992px){
nav ul{
text-align:center;
width:80%; /*reduce the list width */
margin:0 auto; /* to make it align center */
}
}