ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Flexform
• April 23, 2013 at 4:51 am #2585
  Hamilton

  Member

  Post count: 28

  Hey guys, how would you make the header stay fixed to the top of the page and not move while allowing page content to scroll underneath it?

  Thanks.

  /R

  April 23, 2013 at 8:16 pm #2668
  Cosmin – SUPPORT

  Member

  Post count: 3851

  Hey,

  Our theme already has something like this, it makes the menu follow you while scrolling.

  To build something similar, you can check out js/function.js at around line 115, where we have the code that does what I described above.

  Regards,

  ————————————————————————————————————

  Cosmin
  Support Assistant

  April 23, 2013 at 9:16 pm #2692
  Hamilton

  Member

  Post count: 28

  Ah, I didn’t know you had this option. Is it something that turns on/off in the header settings?

  April 23, 2013 at 11:29 pm #2713
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Flexform Options > Header Options > Mini header

  🙂

  – Ed

  April 24, 2013 at 3:52 pm #2781
  Hamilton

  Member

  Post count: 28

  Cool, didn’t know that is what the mini header did. Unfortunately how it functions isn’t what  is desired. Loosing the logo & having the menu change position doesn’t work for them.

  I’ve been asked to shrink the height of the header by 20-30px and then have it remain fixed at the top of the page.

  They currently like the logo size & nav sive so reducing them to make a shorter height on the header box isn’t an option.

  http://dev1.ryanhamilton.ca/Playland/

  Could you please help with this by sharing where to look & what to add or remove.

  I’ve done some google searches on fixed headers but then opening your php file boggles me.

  Thanks

  /R

  April 24, 2013 at 4:02 pm #2782
  Hamilton

  Member

  Post count: 28

  Actually, when adding a temp header BG colour to see the positioning I notice there is a gap between the top of browser & where the header starts. Is this for the Top Bar, but because its turned off it doesn’t show but still uses up the space?

  April 24, 2013 at 4:31 pm #2785
  Hamilton

  Member

  Post count: 28

  I should not that this gap only seems to be visible in Safari. I tried running safari as IE8 mode and it showed the gap also. Chrome & Firefox snug it it right up to the browser window. I’m guessing that once I get the header in a fixed position that the page content will be visible in that gap on Safari when it scrolls through it.

  April 24, 2013 at 4:32 pm #2786
  Hamilton

  Member

  Post count: 28

  ^^ I should note^^ – spelling error.

  April 24, 2013 at 4:56 pm #2787
  Hamilton

  Member

  Post count: 28

  Sorry, the gap actually was cause by still being within the wordpress editor. Even though I had a separate Safari window open used to refresh and see changes it made that gap where the WP top bar would be. Once I logged out of wordpress the gap was gone.

   

  Sorry for that confusion. Fixing the header in place  is the topic of this post still.

  Thanks.

  April 24, 2013 at 9:17 pm #2848
  Cosmin – SUPPORT

  Member

  Post count: 3851

  Hi,

  If the mini header is not an option for you, then you will need to custom code your own functionality; I already provided the location and file where we are doing it with the mini header in the theme, as an example.

  Regards,

  ————————————————————————————————————

  Cosmin
  Support Assistant

  April 24, 2013 at 11:05 pm #2858
  Hamilton

  Member

  Post count: 28

  Ah yes. I forgot you mentioned that when I got side tracked on seeing how the mini header worked.

  I’ll check it out, thanks.

• Back to forum

  Posted in: Flexform