XF 1.3 Sticky Header and Navigation Like Digital Point

[Jericho M]

One thing that I like in Digital Point Forums is their sticky Header and Navigation bar. I want to implement this on my forum. Does anyone out there knows how to achieve this design?

Hope for your positive response.

Regards,
Jericho M

 

[Jericho M]

After 5 days, still no response? Come on guys...

 

[Dakis]

I don't know how you can achieve that, but @Audentio makes some great styles that have that type of navigation, example : http://xenforo.com/community/resources/ui-x.2239/

 

[Jericho M]

Thanks for the suggestion but I think I'd stay with the default theme for now.

 

[AndreaMarucci]

I've done it on my forum and here

http://www.bbsmiley.com/threads/fixed-navbar.394/#post-3528

you'll find some ideas...

 

[agison]

I've done it on my forum and here

http://www.bbsmiley.com/threads/fixed-navbar.394/#post-3528

you'll find some ideas...

Can't see it in action.

 

[AndreaMarucci]

Maybe you've to be registered. Here it is

#header
{
    @property "header";
    background-color: @primaryMedium;
    @property "/header";
    position:fixed !important;
    z-index:7000;
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);

}

#moderatorBar
{
background-color: @primaryDarker;
    border-bottom: 1px solid @primaryLightish;
    font-size: 11px;
    position:fixed;
    z-index:10000;
    margin: 0px auto 0px auto;
    width:100%
}

#content {
margin-top:20px;
}

Also you've to put in the logo_block template at the very beginning this code

<div style="height:20px;"></div>

and if works perfectly. The only issue is that the little tab at the top right that make the login panel appear, is gone so you've to click on the big orange button to make the panel appear but it works!

 

[agison]

Maybe you've to be registered. Here it is

#header
{
    @property "header";
    background-color: @primaryMedium;
    @property "/header";
    position:fixed !important;
    z-index:7000;
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);

}

#moderatorBar
{
background-color: @primaryDarker;
    border-bottom: 1px solid @primaryLightish;
    font-size: 11px;
    position:fixed;
    z-index:10000;
    margin: 0px auto 0px auto;
    width:100%
}

#content {
margin-top:20px;
}

Also you've to put in the logo_block template at the very beginning this code

<div style="height:20px;"></div>

and if works perfectly. The only issue is that the little tab at the top right that make the login panel appear, is gone so you've to click on the big orange button to make the panel appear but it works!

It takes lots of space. We should fixed only navigation bar, not all header.

 

[AndreaMarucci]

I've removed the logo from the header and fixed all the header. Maybe not an elegant solution as the Audentio's one, but it works and it's good to see. Look ast http://forum.kog.it

If someone comes out with an addon or something like that to fix the header I'll surely use that one...

 

[vexx]

you can try this http://xenforo.com/community/resources/how-to-create-a-a-sticky-navigation-menu.3004/

 

[BassMan]

FYI you can try this one: https://xenforo.com/community/resources/sticky-navigation-premium-edition.3614/