SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change my Menu Floating

    I would like to make Main Menu as floating Menu. (in the same position while scrolling the page). I tried the position to absolute and fixed, still missing something. Any recommendation. Here is the site : Technical Tips

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    If you want your whole header as a fixed positioned header then do this:

    Nest a new inner element inside #headerwrap. e.g.
    Code:
    <div id="headerwrap">
      <div id="fixed">
      
      .... rest of header content etc...
    
      </div><!-- end fixed -->
    </div><!-- end headerwrap -->

    Then add this code:
    Code:
    #fixed {
        height: 150px;
        margin: auto;
        width: 978px;
    }
    #header{position:fixed}
    The extra div is needed to enable the auto centering so that when you add the fixed positioned element it is in the right position and needs no co-ordinates (otherwise it will move to the co-ordinate specified and not remain centred).

    Note that an fragment identifiers (in-page links) referenced in the page will scroll up under the fixed header. This is an issue with all fixed elements and cannot easily be fixed. If you don;t have in page links then it should not be an issue.

    If you meant that you only wanted your menu to remain fixed when it reached the top of the window then that is only accomplished with a script and there are plenty of those around to choose from.

  4. #4
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you want your whole header as a fixed positioned header then do this:

    Nest a new inner element inside #headerwrap. e.g.
    Code:
    <div id="headerwrap">
      <div id="fixed">
      
      .... rest of header content etc...
    
      </div><!-- end fixed -->
    </div><!-- end headerwrap -->

    Then add this code:
    Code:
    #fixed {
        height: 150px;
        margin: auto;
        width: 978px;
    }
    #header{position:fixed}
    The extra div is needed to enable the auto centering so that when you add the fixed positioned element it is in the right position and needs no co-ordinates (otherwise it will move to the co-ordinate specified and not remain centred).

    Note that an fragment identifiers (in-page links) referenced in the page will scroll up under the fixed header. This is an issue with all fixed elements and cannot easily be fixed. If you don;t have in page links then it should not be an issue.

    If you meant that you only wanted your menu to remain fixed when it reached the top of the window then that is only accomplished with a script and there are plenty of those around to choose from.
    Paul, You are the life saver. It is working in my text site and I will implement soon.


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
  •