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

XF 1.3 Sticky Header and Navigation Like Digital Point

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

AndreaMarucci

Well-known member
#7
Maybe you've to be registered. Here it is

Code:
#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
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!
 

dihuta

Formerly Dinh Thanh
#8
Maybe you've to be registered. Here it is

Code:
#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
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

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