XF 1.2 Navigation Fixed

[faeronsayn]

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.

 

[Jake Bunce]

Fixed width layout:

http://xenforo.com/community/threads/wallpaper-size.22055/

 

[faeronsayn]

Fixed width layout:

http://xenforo.com/community/threads/wallpaper-size.22055/

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.

 

[Forsaken]

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

 

[faeronsayn]

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

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

 

[faeronsayn]

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]

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]

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]

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]

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.

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

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