How can I make content appear beneath a fixed DIV element

Question

My intention is to create a menu at the top of the page which remains at the top of the page even when the user scrolls  like Gmail s recent feature which has the commonly-used buttons scrolling down with the user so that it allows them to perform operations on messages without having to scroll to the top of the page    I would also like to set the content below said menu to appear below it - at present  it appears behind it   I am aiming for something like this                                         MENU             lt --- Fixed menu - stays at top even when scrolling                                                           CONTENT BEGINS                  HERE                                                                                                                                                                                                                                    lt --- Bottom of page    I hope to have the menu at the top which never moves and which stays at the top of the page  even when the user scrolls down   I am also looking to have the main content begin beneath the menu when the user is at the top of the page  but when the user scrolls down  then it doesn t matter if the menu goes over the top of the content   Summary    I wish to have a fixed position menu at the top of the page which follows the user when scrolling  Content must appear BELOW the menu ONLY when the user is at the top of the page   When the user scrolls down  the menu may overlap the content     Can somebody please explain how to achieve this   Thank you   UPDATE   CSS Code    floatingMenu  clear  both  position  fixed  width  85   background-color   78AB46  top  5px      HTML Code    lt div id  floatingMenu  gt       lt a href  http   www google com  gt Test 1 lt  a gt       lt a href  http   www google com  gt Test 2 lt  a gt       lt a href  http   www google com  gt Test 3 lt  a gt   lt  div gt      At present  I can get the menu to appear at the top of the page and centered by placing it inside my container div   However  the content goes behind the menu   I have set clear  both  and this has not helped

User · Answer

Wrap the menu contents with another div    lt div id  floatingMenu  gt       lt div gt           lt a href  http   www google com  gt Test 1 lt  a gt           lt a href  http   www google com  gt Test 2 lt  a gt           lt a href  http   www google com  gt Test 3 lt  a gt       lt  div gt   lt  div gt    And the CSS    floatingMenu       clear  both      position  fixed      width  100       height  30px      background-color   78AB46      top  5px      floatingMenu  gt  div       margin  auto      text-align  center      And about your page below the menu  you can give it a padding-top as well    content       padding-top  35px     top 5px plus height 30px

User · Answer

There is  at least  one wayhack to get truly dynamic height without javascript  insert the menu twice    Once in the flow to position the following elements  and once fixed for the desired visual effect     x000D   x000D   lt div id  the-menu-container  gt  x000D       lt nav class  position-static  gt     lt  nav gt  x000D       lt nav class  position-fixed  gt     lt  nav gt  x000D   lt  div gt  x000D   x000D   x000D    Depending on the rest of your site  you might have to tweak the z-index styles of the  lt nav gt  elements

User · Answer

I just added a padding-top to the div below the nav  Hope it helps  I m new on this  C    nav       position  fixed      top  0      left  0      width  100       margin  0 auto      padding  0      background  url    css patterns black denim png       z-index  9999      container       display  block      padding  6em 0 3em

User · Answer

A  spacer div must be placed between the header and main body  like this    lt header gt   lt  header gt   lt div id  spacer  gt  lt  div gt   lt main gt   lt  main gt    The header s position will be fixed  while the spacer will keep its default static position   header  position  fixed     Finally you need to make sure that both the header and spacer have the same size-related properties  like so   header   spacer       height  100px      max-height  35vh      This works for me at least

User · Answer

Having just struggled with this and disliking some of the  hackier  solutions  I found this to be useful and clean    floatingMenu    position  sticky    top  0

User · Answer

To those suggesting the use of margin-top or padding-top to move the main division below the fixed menu - you don t seem to be testing it completely   If you set a margin or padding  it will scroll with the page and you will lose lines - go try this page  Looks good  does it not  Highlight a word on the bottom visible line and press page-down - the line with the highlighted word  and a few other lines  will be scrolled under the fixed division   Margin-top or padding-top WILL position the main division below the fixed division but it all falls flat on its face when you page-down or click the scroll bar to scroll one viewport height of the page   Same problem if you page-up  lines  fall off  the bottom of the view-port   Does anyone have an actual fix for THIS problem   I know how to position things - that s fairly easy if you know the basics about margins  padding  etc  - but how do you prevent the loss of lines when scrolling   I ve looked at a lot of examples of what are claimed to be a properly functioning pages with fixed divisions at the top  but they don t work  They all have problems which scrolling   I have come across some pages appear to work but if the fixed division is made higher  lines will be lost  I believe I know why they appear to work   Think in terms of how text on a totally normal  no fancy formatting  page scrolls  Do you see the bottom line when you scroll up or do you see the next line - the bottom one having scrolled off the top of the viewport   Answer - you see the bottom line scrolled to become the top line   The fixed menu pages that seem to work really don t  Scroll them and the bottom line is scrolled off the viewport but since the next line is visible  it appears that the fixed division works - but we know better  don t we   If the fixed division gets higher than the height of one line of text  they fail and lines are lost   The only pages that I ve seen that actually work properly are on sites such as yahoo and I don t have the time  nor inclination  to dig down into what is a lot of CSS  HTML  and JavaScript on the pages to get to the heart of the matter   So - go to that page and see if you can make changes   inspect  the elements and make changes to the CSS rules  that fix the scrolling problems   If you can  come back and share your discovery with world   My page is a good place to look at what it takes to be able to fix a division at the top  center it  and the main division  and restrict it to a max-width  It may help some of you but I m sorry I don t have a fix for the scrolling problem  Play with the height of the fix division - make it short enough so that only one line shows and then play with the scrolling  Then make it large enough for two lines and then three and play with the scrolling  You ll see the issues   Here is a page that is supposed to work but it doesn t - read the very last comment - they describe the problem in a different way but it is the same problem  I just tested the page again in Chrome and it seems to work fairly satisfactorily  With FF the problem exists  Haven t tried IE again  yet   So - what is different with FF   Here s a page at cNet which works with chrome and ff - so what are they doing   More testing with Chrome shows that it fails to fully display the bottom line when scrolled  Just part of the line that was at the bottom is visiable when your scroll - so  still need a fix

User · Answer

I liked grdevphl s Javascript answer best  but in my own use case  I found that using height   in the calculation still left a little overlap since it didn t take padding into account  If you run into the same issue  try outerHeight   instead to compensate for padding and border     document  ready function         var contentPlacement       header   position   top       header   outerHeight            content   css  margin-top  contentPlacement

User · Answer

What you need is an extra spacing div  as far as I understood your question    This div will be placed between the menu and content and be the same height as the menu div  paddings included   HTML   lt div id  fixed-menu  gt      Navigation options or whatever   lt  div gt   lt div class  spacer  gt       amp nbsp   lt  div gt   lt div id  content  gt      Content   lt  div gt    CSS   fixed-menu       position  fixed      width  100       height  75px      background-color   f00      padding  10px      spacer       width  100       height  95px      See my example here   This works by offsetting the space that would have been occupied by the nav div  but as it has position  fixed  it has been taken out of the document flow     The preferred method of achieving this effect is by using margin-top  95px   your nav height   on your content wrapper

User · Answer

If your menu height is variable  for responsiveness or because it s loaded dynamically   you can set the top margin to where the fixed div ends  For example   CSS   fixed-header       width  100       margin  0 auto      position  fixed      -webkit-box-sizing  border-box      -moz-box-sizing  border-box      -ms-box-sizing  border-box      box-sizing  border-box      z-index  999      Javascript    document  ready function         var contentPlacement       header   position   top       header   height            content   css  margin-top  contentPlacement         HTML       lt div id  header  class  fixed-header  gt  lt  div gt   lt div id  content  gt     lt  div gt          Here s a fiddle  https   jsfiddle net 632k9xkv 5   that goes a little beyond this with both a fixed nav menu and header in an attempt to hopefully make this a useful sample

User · Answer

I just had this problem  and this was my solution    floatingMenu           margin-top  35px      Adjust for the height of your floatingMenu  If you don t know for sure that it s a div following then you can use   rather than div   This is all valid CSS2

User · Answer

You should try that Pen I hope that will help you and even give more better functionality to use fixed navigation  1 clear both  you dont need to use clear

User · Answer

nav      position  -webkit-sticky     Safari        position  sticky      top  0      margin  0 auto      z-index  9999      background-color  white

User · Answer

Here s a responsive way of doing it with jQuery      window  resize function                YourRelativeDiv   css  margin-top       YourFixedDiv   height

[css] How can I make content appear beneath a fixed DIV element?

Examples related to css

Examples related to menu