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

XF 1.4 Navigation Bar

#1
Hello! I'm trying to figure out a way to move the navigation bar on my forum all the way to the top (above the header, but under the admin tab) and make it extend to 100% of the screen.

Capture.JPG

I looked at some older threads to see if someone had asked for this before with no luck. I have seen a few themes that have it like that though, and some people who only moved part of it to the mod bar, but I'm trying to move the whole thing similar to this theme:
Capture2.JPG

If someone could give me a hand with this or at least guide me in the right direction I would really appreciate it.

Thank you
 

Dylan V

Well-known member
#2
Hi,

To reproduce exactly the same thing, you need to customize a few templates and it takes time. To move the navigation above the logo, search for "header" template and replace its content with:
Code:
<xen:edithint template="header.css" />

<xen:hook name="header">
<div id="header">
    <xen:include template="navigation" />
    <xen:include template="logo_block" />
    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</xen:hook>
Custom work is required.

Screenshot_1.png
 
Last edited:
#3
Hi,

To reproduce exactly the same thing, you need to customize a few templates and it takes time. To move the navigation above the logo, search for "header" template and replace its content with:
Code:
<xen:edithint template="header.css" />

<xen:hook name="header">
<div id="header">
        <xen:include template="navigation" />
    <xen:include template="logo_block" />
    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</xen:hook>
Custom work is required.

View attachment 103476
Awesome, that helped a lot. I figure I would have to do a lot more to get it to look the way I want, but I can do that. One last question is there a way to move the search bar together with it?

Thanks!
 
#4
Awesome, that helped a lot. I figure I would have to do a lot more to get it to look the way I want, but I can do that. One last question is there a way to move the search bar together with it?

Thanks!
Try moving
<xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
Up 1
 

Dylan V

Well-known member
#6
Awesome, that helped a lot. I figure I would have to do a lot more to get it to look the way I want, but I can do that. One last question is there a way to move the search bar together with it?

Thanks!
Where you want to put the search bar? You want like your screenshot?
 

Dylan V

Well-known member
#10
Either the regular search bar or the one just like in the screen shot, but would prefer it to be the magnifying glass.
Go to the "EXTRA.css" and add this:
Code:
#QuickSearch
{
    display: none;
}
Then replace "search_bar.css" with:
Code:
#searchBar
{
    position: relative;
    zoom: 1;
    z-index: 52; /* higher than breadcrumb arrows */
}

    #QuickSearchPlaceholder
    {
        position: absolute;
        top: 2.5px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 11px;
        height: 16px;
        width: 16px;
        box-sizing: border-box;
        text-indent: -9999px;
        background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -144px 0px;
        overflow: hidden;
    }

    #QuickSearch
    {
        display: block;
     
        position: absolute;
        right: -27px;
     
        margin: 0;
     
        background-color: @content.background-color;
        border-radius: 5px;
        padding-top: 5px;
        _padding-top: 3px;
        z-index: 7500;
    }
         
        #QuickSearch .secondaryControls
        {
            display: none;
        }
 
        #QuickSearch.active
        {
            box-shadow: 5px 5px 25px rgba(0,0,0, 0.5);
            padding-bottom: 5px;
        }
     
    #QuickSearch .submitUnit .button
    {
        min-width: 0;
    }
     
    #QuickSearch input.button.primary
    {
        float: left;
        width: 110px;
    }
 
    #QuickSearch #commonSearches
    {
        float: right;
    }
 
        #QuickSearch #commonSearches .button
        {
            width: 23px;
            padding: 0;
        }
     
            #QuickSearch #commonSearches .arrowWidget
            {
                margin: 0;
                float: left;
                margin-left: 4px;
                margin-top: 4px;
            }
 
    #QuickSearch .moreOptions
    {
        display: block;
        margin: 0 24px 0 110px;
        width: auto;
    }

    #QuickSearchPlaceholder.hide
    {
        display: none;
    }

    #QuickSearch.show
    {
        display: block;
    }
Replace "header" template with:
Code:
<xen:edithint template="header.css" />

<xen:hook name="header">
<div id="header">
        <xen:include template="navigation" />
    <xen:include template="logo_block" />
</div>
</xen:hook>
After go to "navigation_visitor_tab" and replace this (at the bottom of the template):
Code:
            <div class="sectionFooter">
                <a href="{xen:link account/alert-preferences}" class="floatLink">{xen:phrase alert_preferences}</a>
                <a href="{xen:link account/alerts}">{xen:phrase show_all}...</a>
            </div>
        </div>
    </li>
 
    <xen:hook name="navigation_visitor_tabs_end" />
</ul>
with:
Code:
            <div class="sectionFooter">
                <a href="{xen:link account/alert-preferences}" class="floatLink">{xen:phrase alert_preferences}</a>
                <a href="{xen:link account/alerts}">{xen:phrase show_all}...</a>
            </div>
        </div>
    </li>
 
    <li>
 
    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
 
    </li>
 
    <xen:hook name="navigation_visitor_tabs_end" />
</ul>
Result:

Screenshot_1.png

Screenshot_2.png

This is the solution to give you an idea of how to reproduce as shown in your screenshot. You must custom as you want.
 
#11
Go to the "EXTRA.css" and add this:
Code:
#QuickSearch
{
    display: none;
}
Then replace "search_bar.css" with:
Code:
#searchBar
{
    position: relative;
    zoom: 1;
    z-index: 52; /* higher than breadcrumb arrows */
}

    #QuickSearchPlaceholder
    {
        position: absolute;
        top: 2.5px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 11px;
        height: 16px;
        width: 16px;
        box-sizing: border-box;
        text-indent: -9999px;
        background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -144px 0px;
        overflow: hidden;
    }

    #QuickSearch
    {
        display: block;
    
        position: absolute;
        right: -27px;
    
        margin: 0;
    
        background-color: @content.background-color;
        border-radius: 5px;
        padding-top: 5px;
        _padding-top: 3px;
        z-index: 7500;
    }
        
        #QuickSearch .secondaryControls
        {
            display: none;
        }

        #QuickSearch.active
        {
            box-shadow: 5px 5px 25px rgba(0,0,0, 0.5);
            padding-bottom: 5px;
        }
    
    #QuickSearch .submitUnit .button
    {
        min-width: 0;
    }
    
    #QuickSearch input.button.primary
    {
        float: left;
        width: 110px;
    }

    #QuickSearch #commonSearches
    {
        float: right;
    }

        #QuickSearch #commonSearches .button
        {
            width: 23px;
            padding: 0;
        }
    
            #QuickSearch #commonSearches .arrowWidget
            {
                margin: 0;
                float: left;
                margin-left: 4px;
                margin-top: 4px;
            }

    #QuickSearch .moreOptions
    {
        display: block;
        margin: 0 24px 0 110px;
        width: auto;
    }

    #QuickSearchPlaceholder.hide
    {
        display: none;
    }

    #QuickSearch.show
    {
        display: block;
    }
Replace "header" template with:
Code:
<xen:edithint template="header.css" />

<xen:hook name="header">
<div id="header">
        <xen:include template="navigation" />
    <xen:include template="logo_block" />
</div>
</xen:hook>
After go to "navigation_visitor_tab" and replace this (at the bottom of the template):
Code:
            <div class="sectionFooter">
                <a href="{xen:link account/alert-preferences}" class="floatLink">{xen:phrase alert_preferences}</a>
                <a href="{xen:link account/alerts}">{xen:phrase show_all}...</a>
            </div>
        </div>
    </li>

    <xen:hook name="navigation_visitor_tabs_end" />
</ul>
with:
Code:
            <div class="sectionFooter">
                <a href="{xen:link account/alert-preferences}" class="floatLink">{xen:phrase alert_preferences}</a>
                <a href="{xen:link account/alerts}">{xen:phrase show_all}...</a>
            </div>
        </div>
    </li>

    <li>

    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>

    </li>

    <xen:hook name="navigation_visitor_tabs_end" />
</ul>
Result:

View attachment 103479

View attachment 103480

This is the solution to give you an idea of how to reproduce as shown in your screenshot. You must custom as you want.
You have no idea how much this helps, thank you!