3

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

rafacardosoc
  • 251
  • 1
  • 7
  • 16
  • See if this is what you want: change the field `right` in the `#nav` to `auto`. – PiLHA Jul 24 '13 at 18:50
  • @PiLHA: right position is fine, what i wanted to change is the TOP/BOTTOM position. i dont want it to scroll with the page! – rafacardosoc Jul 24 '13 at 18:52
  • I don't see anything in example , Is i my problem? ... anyway I think you need to use 'position:relative;' next placing your div by top and right/left parameters ... Something else, I saw a little Jquery that makes hover style, It's better to use #nav:hover. – A.Mokhtari Jul 24 '13 at 19:05
  • FOUND AN ANSWER! http://stackoverflow.com/questions/8590904/how-to-avoid-position-fixed-from-staying-on-the-screen-when-vertical-scrolling?rq=1 – rafacardosoc Jul 24 '13 at 19:09

4 Answers4

1

Change your nav class to:

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

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)

Pevara
  • 14,242
  • 1
  • 34
  • 47
0

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.

alireza
  • 1
  • 2
0

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

penguoir
  • 155
  • 1
  • 11