SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    672
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Positioning Nav Absolute

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,519
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Is this what you meant?

    Code:
    #story-modo{
    position:fixed;
    }

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    672
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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...

    http://modocom.ca/2014/#modo

    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,519
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    672
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,519
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    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.
    What if you set a max-width?

    Code:
    #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.

  7. #7
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    672
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,519
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    I'm using percentages as #story-modo has a class of col-1-3 which should be 33.3%.
    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 a similar thing in the right column but takes a little preparation.

    If that doesn't make sense I'll be back tomorrow

  9. #9
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    672
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    Seems like it works quite well but now need to restructure, the content/text areas on...

    http://modocom.ca/2014

    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

  10. #10
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    672
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Restructured that page but now the div on that page doesnt remain fixed. Any ideas why?

    http://modocom.ca/2014/

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,519
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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?

  12. #12
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    672
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I'm trying to achieve same thing as I have here....

    http://modocom.ca/

    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

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,519
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Hi Paul,

    I'm trying to achieve same thing as I have here....

    http://modocom.ca/

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •