XF 1.2 Navigation Fixed

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.
 

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.
 

Forsaken

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.
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.
 

EQnoble

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

will work if you put important
 

faeronsayn

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.
#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
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.
 

faeronsayn

Well-known member
Seems to work now, just had a little issue with my page_container template that I had previously edited.
 
Top