XF 2.2 Implement a static header

[Deleted member 241496]

Is there a way to implement a static header that stays are the top (same size and everything) no matter where you are on the page? It would have the logo on the left, nav in the middle, and then the user menu to the right. Similar to the header on www.greencarreports.com.

 

[Deleted member 241496]

Figured it out....you can close this thread.

 

[JRobert]

Please share your solution for other people who may find this thread.

 

[Deleted member 241496]

OK. Placed the following into the extra.less template. It might not be the cleanest way to do it, but it gets it done like we wanted. The boxed layout and 1400px nav would be optional but we think it looks good. And then we also moved the whats new and post thread buttons up into the user nav area on desktop version (using custom templates) as icons so we hid those within the p-title area. The staff menu items were also added to the user nav area via custom templates. The .p-nav-smallLogo is set within the Page Container template by linking directly to the upload directory for the image. Let me know if you have any questions. You can see the results here: www.talkingevs.com

/* Hide normal post thread and new post on other than mobile */
@media (min-width: @xf-responsiveMedium) {
 body[data-template='forum_list'] .p-title {display: none;}
}
/**************/

/* Hide Main Header */
.p-header {
    display:none;
}
/***************/

/* Hide Subnav */
.p-nav-list .p-navEl.is-selected
{
    .p-navEl-splitTrigger
    {
        display: inline;
        position: relative;
    }
    .p-navEl-link.p-navEl-link--splitMenu
    {
        padding-right: 5px;
    }
    &
    {
        &:hover,
        .p-navEl-link:hover,
        .p-navEl-splitTrigger:hover
        {
            .xf-publicNavTabHover();
            color: @xf-publicNavTab--color;
        }
    }
}
.p-sectionLinks
{
    display: none;
}
/********************/

/* Display logo in Nav */
.p-nav-smallLogo
{
    display: block;
    max-width: 225px;
    align-self: center;
    margin: 0 0 0 10px;
    img
    {
        display: block;
        max-height: 60px !important;
    }
}
/**************/

/* Hide staffbar navigation at top  */

.p-staffBar { display: none; }
.p-navStaffBar { display: inline-block; }
.p-navgroup-link {
    &.p-navgroup-link--moderatortools i:after { .m-faContent(@fa-var-tools, 1em); }
}
/**********/

/* Boxed layout  & Full Width Nav*/
@media (min-width: @xf-responsiveMedium)
{
.p-nav .p-nav-inner, .p-sectionLinks .p-sectionLinks-inner {
    max-width: 1500px;
}
   
.p-body {
    max-width: 1200px;
    margin: 0 auto;
    background-color: xf-intensify(@xf-contentBg, 5%);
    padding: 10px;
}
}
/***************/