Holaaa...
Estoy intentado centrar los elementos de mi menú, pero no veo por donde debo 'atacar'.
Este es mi código:
Código:
<nav class="nav">
<ul class="nav-list">
<li class="nav-item"><a class="current-demo" href="#">Inicio</a></li>
<li class="nav-item"><a href="sobremi.html">Sobre mí</a></li>
<li class="nav-item"><a href="portafolio.html">Portafolio</a></li>
<li class="nav-item"><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
y estos los estilos:
Código:
.nav {
position:relative;
font-size:1.1em;
font-weight:900;
width: 100%;
border-top: 1px solid mediumspringgreen;
background: rgba(0, 0, 0, 0.3);
}
.nav-item {
float:left;
display:inline;
list-style: none;
font-size: 1.2em;
}
a.current-demo,
a.current-demo:hover{
color: #fff;
}
.nav-item a {
display:block;
padding:0.5em 1.5em;
color:mediumspringgreen;
background:transparent;
font-weight: normal;
}
.nav-list{
}
.nav-item a:hover {
color: #fff;
}
/* Mobile Navigation */
.nav-mobile {
display:none; /* Hide from browsers that don't support media queries */
cursor:pointer;
position:absolute;
top:0;
right:0;
background:transparent url(../img/estrella1a.png) no-repeat center center;
height:40px;
width:40px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
/*-----------Media Queries-------------------------*\
@media only screen and (min-width: 320px) and (max-width: 768px) {
.nav-mobile {
display:block;
}
.nav {
width:100%;
padding:40px 0 0;
}
.nav-list {
display:none;
}
.nav-item {
width:100%;
float:none;
}
.nav-item a {
}
.nav-active {
display:block;
}
.nav-mobile-open {
border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
}
}
Gracias