SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get Menu and header to not scroll?

    Hello there,

    I'm working on this site: www.scotbarchitects.com/profile How might I be able to get the menu and logo in the header to not scroll when looking at the body of text?

    I didn't mess with it quite yet, I didn't want to mess up my CSS. I'd rather do it the right the first time.

    Thanks,
    Lorne

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You could try this:

    Code:
    header .logo, header .plus-menu {
      position: fixed;
    }
    Put that at the end of your style sheet as an experiment, and see if you like the result.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what I want, however is there a way to have it so it doesn't overlap? Basically a cutoff point where the content just disappears? Or just have a scrollbar in the content so that div doesn't move and any overflow is a scrollbar just in that div?

    Thanks Ralph,
    Lorne

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lorne17 View Post
    That's what I want, however is there a way to have it so it doesn't overlap?
    You could put those fixed elements in a fixed header section with a dark background, for example, and have the content slide under it, but it's tricky with the current setup—a full page background image. There would need to be some compromises.

    Personally, though, I think it's better to leave it the way it is. People are used to scrolling, and this standard layout is more reliable across devices.

  5. #5
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    56 Post(s)
    Tagged
    0 Thread(s)
    In the layout I'm currently working with the header is fixed on the larger screens only. You do NOT want a fixed header on a phone layout, so if you do this trick be prepared to combine it with media queries for best effect.

    Looking at your current layout, your header being transparent is going to be a problem. You're going to need to "cut" your header body copy of the background image widthwise. You don't actually need to cut the image, but you will need to reference it twice. The body copy will need to be offset by the width of the header. I *think* this will be seemless. Then, your text can go underneath the background of the header image and appear to disappear into nothing.

    I'm tempted to try it just for the challenge, but I'm also pretty certain it will take a good six hours for me to get it to work.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies. I think I'll stick with a moving header for this circumstance. Michael feel free to give it a shot, but it's not necessary.

    haha, thanks,
    Lorne


Tags for this Thread

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
  •