• 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

faeronsayn

Well-known member
#1
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.
 

faeronsayn

Well-known member
#6
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.
 

Forsaken

Well-known member
#7
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.
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.
 

faeronsayn

Well-known member
#9
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.
#headerMover #header
{
position: fixed !important;
z-index: 1000;
}

will work if you put important
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.
 

EQnoble

Well-known member
#10
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.
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.