CODEWITHSUNDEEP
csspositionnavigationbar
rafacardosoc
rafacardosoc

Reputation: 251

How to make the Navigation bar not move when window scrolled down CSS?

On my website, i got the background image to stay always centered and the navigation to always stay on the same spot horizontally, so it does not matter the HORIZONTAL size, it's always on the same spot i did that by using:

#nav {
    list-style: none;
    position:fixed;
    right:50%;
    margin-right:155px;
    margin-top:220px;
 }

My issue is with the VERTICAL part. When the Window is small vertically and it gets scrolled down, the menu moves with the page, an i don't want that. I wanted to make it stay up there with the logo, but using a percentage for "top" doesn't seem to work. I am not very familiar with javascript so if it could be don with CSS, it would be easier for me to understand!

HEEELP!

here is my example!

jsfiddle.net

Upvotes: 3

Views: 44296

Answers (4)

penguoir
penguoir

Reputation: 155

The problem is the

position: fixed;

in your CSS.

fixed means stay in this part of the screen, even when scrolling. Change it to:

position: absolute;

and the navbar will stay wherever you position it and won't move, even when scrolling.

You can read more about positioning at W3 Schools

Upvotes: 0

alireza
alireza

Reputation: 1

it's because 

position:fixed;

that means you want your nav to move with your screen.

you can read about positions here

but if you want your nav to be beside your logo you should create a div and put both nav and logo in it.

.header
{
  background-color:transparent;/* you can write any color you want but in this way it gets hidden */
  text-align:center;
  position:relative;
  }
#nav
{
  position:absolute;
  bottom:-15px;
  right:42%;
  display:inline-block;
}
ul
{
  list-style:none;
}
<html>
  <body>
    <div class="header"><!--div that contain both logo and nav-->
      <img src="logo.png" alt="logo" /><!--logo image-->
        <!--nav  codes here-->
        <div id="nav">
          <ul><li>nav</li></ul>
        </div>
      </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><center><h2><p>As You can see it doesn't move with page scrolling</p></h2></center>
    </body>
  </html>

the code above is a simple example.

Upvotes: 0

Pevara
Pevara

Reputation: 14310

Not sure if I understand you correctly, but is this what you are looking for:

#nav {
    list-style: none;
    position:fixed;
    left: 0;
    top:220px;
}

And your fiddle: http://jsfiddle.net/wQdVv/16/

Do note that position:fixed on mobile is a bad idea, as support is not good and will produce strange/unwanted results. Use static on mobile in stead (with a media query)

Upvotes: 0

fenix
fenix

Reputation: 164

Change your nav class to:

#nav {
    list-style: none;
    position:absolute;
    right:50%;
    margin-right:155px;
    margin-top:220px;
}

Upvotes: 1

Related Questions