1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained How to create a a sticky navigation menu 2014-03-18

Provide a sticky floating menu to your users when they scroll the forums

  1. vexx

    vexx Active Member

    vexx submitted a new resource:

    How to create a a sticky navigation menu - Provide a sticky floating menu to your users when they scroll the forums

    Read more about this resource...
     
    Mirovinger likes this.
  2. Allan

    Allan Well-Known Member

    Screen please ?
     
  3. CNK

    CNK Active Member

    How to stick the menu to the top of the page?
     

    Attached Files:

  4. smimosmile

    smimosmile Member

    Add top:0; to .floaty class in EXTRA.css
     
    CNK likes this.
  5. BassMan

    BassMan Well-Known Member

    How to use it with fixed style?
     
  6. vexx

    vexx Active Member

    it doesn't matter what style you have, position:fixed will be applied to the element of your choice
     
  7. BassMan

    BassMan Well-Known Member

    But something is not working right. I'll check just one thing...
     
  8. thumped

    thumped Well-Known Member

  9. BassMan

    BassMan Well-Known Member

    Ah, yes, fixed width, not style... Thanks, @thumped. I have same issue as on your example page.
     
  10. BassMan

    BassMan Well-Known Member

    Another thing is the drop-down menu not showing right. It's not all visible.
     
  11. thumped

    thumped Well-Known Member

    try changing the z-index for floaty to 7500
     
    BassMan likes this.
  12. BassMan

    BassMan Well-Known Member

    Great, that's fixed, but how to avoid streching the menu to full screen size if I'm using fixed width like you?
     
  13. Luis

    Luis Well-Known Member

    For styles fixed, please try using:
    PHP:
    .floaty {
        
    positionfixed;
        
    top0;
        
    z-index1000;
        
    right0;
        
    left0;
    }
     
    thumped and BassMan like this.
  14. BassMan

    BassMan Well-Known Member

    Excellent. Now it looks like it should. Thank you very much, @Luis.
     
  15. smimosmile

    smimosmile Member

    To get it working with a fixed style and to include the search bar, i have modified my header template rather than navigation template:

    Code:
    <xen:edithint template="header.css" />
    <xen:hook name="header">
    <div id="header">
        <xen:include template="logo_block" />
            <div class="floatnavigation">
            <xen:include template="navigation" />
            <xen:include template="floating_bar" />
            <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
        </div>
    </div>
    </xen:hook>
    In floating_bar template, I have changed #navigation to .floatnavigation
    Finally, here is my .floaty css:
    .floaty {
    position: fixed !important;
    width: 100%;
    z-index:100;
    top:0;
    }
     
    BassMan likes this.
  16. BassMan

    BassMan Well-Known Member

    Looks promising. I'll test that tomorrow.

    I was already thinking of search box. What about logo and moderator panel to be always on top? So the whole header to be fixed.
     
  17. woei

    woei Well-Known Member

    z3r010 likes this.
  18. FredC

    FredC Well-Known Member

    Did anyone ever figure out a fix for IE users? seems to ignore Margins and such and floats left when browsing with IE..
     
  19. BassMan

    BassMan Well-Known Member

    Brilliant! Finally I've tested it and it works. Well, I combine it with my add-on: http://xenforo.com/community/resources/quicksearch-in-header.2683/

    ... and it looks and functions excellent!
     
  20. PyroM

    PyroM Active Member

    I would like to fix the complete header including logo & searchbar. This somehow works by using id #header and don't care about scrolling height in template floating_bar:

    Code:
    <script>
       jQuery(document).ready(function ($){
           $(window).bind('scroll', function() {
           var navHeight = ( $(window).scrollTop() );
           $('#header').addClass('floaty');
            });
        });
    </script>
    
    But something more is needed.
    This fixes the complete header perfectly, but it overlays the first part of any page, immediatly when scrolling. So the first part of the content "jumps" under the header and is not visible anymore.
    What I would like to achieve is to fix completly the header, and when a user starts to scroll, the content part will be scrolled under that header, without any jumping. When a page is scrolled top, it looks like if the were no floating header, but scrolling the content, even at the first pixels down, the content, which is below the header, will be smoothly (no jumping) scrolled under the header.

    Sorry for this bad description, but maybe one knows what I mean and can help?
     

Share This Page