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

XF 1.2 Navigation Fixed

Discussion in 'Styling and Customization Questions' started by faeronsayn, Jul 31, 2013.

  1. faeronsayn

    faeronsayn Well-Known Member

    If I want the whole navigation system fixed, which class / id should I set the position to fixed? Because I've tried some and they screw up the navigation. If possible, be able to have the #header fixed excluding the #headerProxy, that'd work just as well.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  3. faeronsayn

    faeronsayn Well-Known Member

    I think you misunderstood me, I need the position fixed something like this .css-class { position: fixed; }

    I need the whole navigation, preferably the #header's position fixed / stuck to the browser window.
     
  4. Forsaken

    Forsaken Well-Known Member

    #headerMover #header
    {
    position: fixed;
    z-index: 1000;
    }
     
  5. faeronsayn

    faeronsayn Well-Known Member

    Doesn't work. By the way, I want the whole #header that also contains the navigation/search to be fixed to the browser window.
     
  6. faeronsayn

    faeronsayn Well-Known Member

    Styling just the header like so

    #header {
    position: fixed;
    z-index: 1000;
    }

    Skews the navigation and the header doesn't span the whole width of your screen on top of that it's gets aligned to the left.
     
  7. Forsaken

    Forsaken Well-Known Member

    Add !important at the end of the code I provided and it should work.

    Obviously you'll need to edit it, but it works perfectly fine on the default and I can't really help without knowing how your style is.
     
  8. EQnoble

    EQnoble Well-Known Member

    #headerMover #header
    {
    position: fixed !important;
    z-index: 1000;
    }

    will work if you put important
     
  9. faeronsayn

    faeronsayn Well-Known Member

    I'm directly editing the header.css file and have added this right at the top, however, it does not seem to work. I am using the default theme with a fixed width.
     
  10. EQnoble

    EQnoble Well-Known Member

    I just added this to the header.css template at the top and it displayed correctly.
    Code:
    #headerMover #header
    {
    position: fixed !important;
    z-index: 1000;
    top: 6px !important;
    
    }
    #loginBar {
        position: fixed !important;
        top: 0;
        width: 100%;
        z-index: 1001 !important;
    }
    I did this with a fluid width as I do not have a fixed width setup. If it doesn't work for you and you want me to test it I need a link to your forum.
     
  11. faeronsayn

    faeronsayn Well-Known Member

    Seems to work now, just had a little issue with my page_container template that I had previously edited.
     

Share This Page