CODEWITHSUNDEEP
htmlcss
Skeptar
Skeptar

Reputation: 149

CSS navigation bar fixed, can't scroll

I have a navigation bar which I want to come down if I scroll.
That's why I gave here position: fixed;

Now if I change the size of my browser window, I can't see the links on the right side (I can't scroll the navigation bar to the right side). I think its because position: fixed;, but I don't know how to fix it.

Here my Code:

*{
    margin: 0px;
    padding: 0px;
    font-family: 'Oswald', sans-serif;
}

body{
    height: 2000px;
    background-color: rgb(35, 35, 38);
}

nav{
    width: 100%;
    background-color: rgb(14, 14, 14);
    overflow: hidden;
    border-bottom: 2px solid black;
    margin-bottom: 5px;
    position: fixed;
    top: 0;
}

.nav-top-ul{
    font-size: 0px;
    width: 1000px;
    margin: 0px auto;
}

section{
    margin: 0px auto;
    width: 1000px;
    margin-top: 50px;
    word-wrap: break-word;

}

.nav-top-li{
    display: inline-block;
}

.nav-top-a{
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    color: rgb(137, 137, 137);
    transition: all 0.5s;
    text-decoration: none;
}

.nav-top-a:hover{
    color: white;
}

.right{
    float: right;
}

.left{
    float: left;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Seite</title>
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
      
    </head>
    <body>
        <nav>
            <ul class="nav-top-ul">
                <div class="left">
                    <li class="nav-top-li"><a  class="nav-top-a" href="index.php?content=home">NameDerSeite</a></li>
                </div>
                <div class="right">
                    <li class="nav-top-li"><a  class="nav-top-a" href="index.php?content=home">Login</a></li>
                    <li class="nav-top-li"><a  class="nav-top-a" href="index.php?content=home">Register</a></li>
                </div>
            </ul>
        </nav>
        
        <section>
            <p>Example... Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...</p>
        </section>
    </body>
</html>

Upvotes: 0

Views: 2664

Answers (2)

Andrew Lerma
Andrew Lerma

Reputation: 39

Add:

  position: fixed;
  right: 5px;

to the .right css.

.right {
float: right;
position: fixed;
right: 5px;
}

Upvotes: 0

dayuloli
dayuloli

Reputation: 17011

It's nothing to do with position: fixed. You just set the width of the navigation bar to 1000px. Set it to 100% and you'll be fine.

.nav-top-ul{
    font-size: 0px;
    width: 1000px; // Change this to 100%
    margin: 0px auto;
}

Upvotes: 4

Related Questions