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;
}
سؤال
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.
المحلول
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;
}
نصائح أخرى
#nav {
position: fixed;
left:0;
right:0;
}
and replace margin-right:80 with margin:5px 40px
#nav a{
margin: 5px 40px;
}