Hello,
Ok here is my site…
http://modocom.ca/2014/page.html
What I am trying to do is position the left navigation to always stay at the top so when you scroll its still at top of the browser. When trying position absolute I can get it to the top of the page but the width changes, hence why I went back to this. The width goes longer and the logo gets blurry and the border lines go beyond the margin and break the grid.
Could someone please help.
Thanks,
Mike
Is this what you meant?
#story-modo{
position:fixed;
}
Yes that is what I mean, when I do that it changes the size of my logo and will mess up the homepage design if I add it to #story-modo my homepage is at…
Which on that page to I would like it to always be at the top of browser as well. I know below I have content in three columns but once I can solve the navigation being positioned at the top I’ll be removing the three columns so its just two floated to the right and the navigation on the left.
Basically need the .navigation to stay at the top of browser throughout whole site, if that makes sense and look exactly as is without it changing sizes or logo changing size.
Thanks,
Mike
If you add the code I gave you to this page then I believe it does exactly what you asked for?
Therefore you just need to ensure that your other pages have the same structure for it to work.
If you make the section position:fixed then you have to ensure that your content steers clear of it which is does on that home page so you will need to use the same structure in your other pages.
Unless I’m misunderstanding what you are saying 
Ok I did that and now that column is to wide and the logo is too large and pixelated, thats the issue I had before as well.
Also now at http://modocom.ca/2014/ the navigation doesnt look the same or stay at the top and theres a large gap above the navigation now too.
Thanks,
Mike
What if you set a max-width?
#story-modo {
position: fixed;
max-width: 360px;
}
Also now at http://modocom.ca/2014/ the navigation doesnt look the same or stay at the top and theres a large gap above the navigation now too.
Thanks,
Mike
As said above you can only have a fixed nav if you keep your content clear and you need the same structure as the original page to do this.
I’m using percentages as #story-modo has a class of col-1-3 which should be 33.3%.
Once we get this page solved I can begin restructuring the parallax page which hopefully shouldn’t be too difficult.
Thanks,
Mike
The max-width I added should make it almost identical to the non fixed version (within reason). The problem is that once you make it fixed then the width refers to the viewport and not the element where it originally sat.
Read my entry from a recent CSS quiz where we do [URL=“http://www.pmob.co.uk/temp/fixed-main2.htm”]a similar thing in the right column but takes a little preparation.
If that doesn’t make sense I’ll be back tomorrow
Thanks,
Seems like it works quite well but now need to restructure, the content/text areas on…
So that its in the same spot I removed the three column grids from everywhere else basically want the nav in the exact same spot as the other page and go overtop all the parallax stuff and the content to the right in columns. Is this something have to restructure more or can I easily modify it?
Thanks,
Mike
Restructured that page but now the div on that page doesnt remain fixed. Any ideas why?
Hi,
Unfortunately, transforms (and backface-visibility:hidden) kill fixed positioning. You need to remove the fixed element from any context where parents or children are transformed.
I’m not sure how a fixed element is going to work in that page where you are scrolling whole pages upwards. What are you trying to achieve on those pages and is a fixed nav going to work with that content?
Hi Paul,
I’m trying to achieve same thing as I have here…
Just updated all my code, same as on that page though the navigation will be tough to see on darker backgrounds but that is ok.
Thanks,
Mike
You have a different structure on that page and the fixed element is not in the same content as the translated/transformed elements and so isn;t affected by the bug I mentioned. I suggest you try and mimic the structure on the page that is working that copy it to your other page. Unfortunately, there is no cure for the bug I mentioned apart from moving the fixed element out of the context of the transformed elements.