Just add left:0; right:0;
to the fixed #nav
element:
#nav {
position: fixed;
left:0; right:0;
}
Then remove the margin-right
for the last li
element's child anchor element:
#nav li:last-child a {
margin-right:0;
}
Pregunta
I'm trying to center the navigation, but I haven't succeeded yet. The idea is that the navigation moves along as the user scrolls the page. It has to be responsive as well, because navigation should always be displayed. So I've come up with this:
<nav id="nav" class="container">
<ul>
<li><a href="#avaleht" class="avaleht" title="Avaleht" >avaleht</a></li>
<li><a href="#massaazh" class="massaazh" title="Massaaž" >massaaž</a></li>
<li><a href="#kontakt" class="kontakt" title="Kontakt" >kontakt</a></li>
</ul>
</nav>
And the CSS:
#nav
{
position: fixed;
}
#nav ul
{
list-style: none;
padding-left: 0;
text-align: center;
}
#nav li
{
display: inline-block;
}
#nav a
{
color: rgb(255,255,255);
font-family: 'Open Sans', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 1.3em;
display: block;
margin-right: 80px;
height: 100px;
width: 100px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
line-height: 100px;
}
#nav a.avaleht
{
background: rgb(168,191,18);
}
#nav a.massaazh
{
background: rgb(255,159,0);
}
#nav a.kontakt
{
background: rgb(0,170,181);
}
#nav a:hover
{
text-decoration: none;
background: rgb(66,64,62);
}
And this is how I'd like it to work:
Thank you very much.
Solución
Just add left:0; right:0;
to the fixed #nav
element:
#nav {
position: fixed;
left:0; right:0;
}
Then remove the margin-right
for the last li
element's child anchor element:
#nav li:last-child a {
margin-right:0;
}
Otros consejos
#nav {
position: fixed;
left:0;
right:0;
}
and replace margin-right:80 with margin:5px 40px
#nav a{
margin: 5px 40px;
}