Fixed Navigation

HTML & CSS
1

Hey guys,

Just having a problem here with one of websites.

Just trying to have my navigation fixed at the top corner like I do on the inner pages where it will be and I need the text…

“We inspire
emotion & action through
brand-focused design.”

Right up at the top. I tried fixing the navigation sidebar but it totally disappears for some reason but fixes the text and it goes to the top could someone take a look at it…

Here is the link for the site…

Modo*

I would like the logo and navigation to always remain there and visible even when you scroll, like I did on these pages…

Modo

Thanks for anyone who can help me solve this issue.

Mike

2

Hi,

Just use position:fixed and ensure you have a higher z-index than the other elements.

e.g.


#left {
    float: left;/* ie6*/
    position: fixed;
    top: 20px;
    z-index: 99;
}
3

Thanks my friend. Yea it was the z-index that I was having issues with before but now seems to work, maybe had a spelling error.

One other thing you’ll see on Firefox, Chrome, Safari it scrolls and has the parallax effect.

Does it do it well in IE8 and IE9 as well, because on IE7 it doesnt scroll at different speeds if you know what I mean you dont get the parallax effect, anyone know why?

Thanks,

Mike

4

Still having a little issue in IE7 but looks and works great in IE8 not sure about IE9…

One more question my font-face on my Macs look great but in IE and on PC it looks grainy the font, how do I fix that?

Thanks,

Mike

5

The issue in IE7 not scrolling is a js error here:


     KEY_UP: 'keyUp',
     KEY_DOWN: 'keyDown',
     KEY_LEFT: 'keyLeft',
     KEY_RIGHT: 'keyRight',
     KEY_ESC: 'keyEsc',
    [B] KEY_SPACE: 'keySpace',[/B]
     
     
    
    
  
  } // Events

The last comma should not be there or IE thinks there should be an other item following. It should be:


     KEY_UP: 'keyUp',
     KEY_DOWN: 'keyDown',
     KEY_LEFT: 'keyLeft',
     KEY_RIGHT: 'keyRight',
     KEY_ESC: 'keyEsc',
 [B]    KEY_SPACE: 'keySpace'[/B]
     
     
    
    
  
  } // Events

Regarding fonts on the pc then they always look bad to me especially on XP if cleartype isn’t being used and especially at large sizes.

I’m not sure there’s much you can do about it but to be honest I always avoid using font-face so may have missed some of the tricks. :slight_smile:

6

Thanks Paul!!!

I made the change to the JS but upgrade my IE so not sure if it works in IE7 anymore, could someone check now the only issue I have is that when you go to the site the Lowerys logo is in wrong spot until you start to scroll then it jumps over, any reason why this is?

Thanks,

Mike

7

Hi,

It seems to be working in IE7 now ok.

The jumping seems to be cause by the js writing a new background-position for the image.

You could try to set the position the same as the js does to start with but I’m guessing the js may change it on the fly anyway.

e.g.


#story-lowerys .bg {
    background: url("../../images/lowerys-logo.png") no-repeat fixed[B] 50% 110px[/B];
    height: 1600px;
    left: 100px;
    position: absolute;
    top: 0;
    width: 1600px;
}
8

Perfect!!! Worked like a charm!!!

I know you mentioned about my font-face issue. Do you recommend any other way around this with using the same font that I have used the DinPro to make it look crisp on PC’s. Do other websites using font-face have the same results on PCs?

Thanks,

Mike

9

Did you run your fonts through the font-squirrel generator as there is an expert option to turn on hinting which may help the font to look better. [URL=“http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/”]Smashing magazine has some info on this also.

It may also be font-specific and a baldy designed font as mentioned in this
article.

There do seem to be issue on windows with large fonts and of course the cleartype issue already mentioned.