XF 1.4 Navigation Bar

raioneru · Apr 10, 2015

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.

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:

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 · Apr 10, 2015

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.

raioneru · Apr 10, 2015

Dylan V said:
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!

bwfcwalshy · Apr 10, 2015

raioneru said:
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

raioneru · Apr 10, 2015

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

Thanks!

Dylan V · Apr 10, 2015

raioneru said:
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?

raioneru · Apr 10, 2015

Dylan V said:
Where you want to put the search bar? You want like your screenshot?

I would like that if possible, right now I was able to put it on top but because of the way it's set up it looks really bad.

Dylan V · Apr 10, 2015

raioneru said:
I would like that if possible, right now I was able to put it on top but because of the way it's set up it looks really bad.

You want to just have the magnifying glass and only show the search bar by clicking on the magnifying glass?

raioneru · Apr 10, 2015

Dylan V said:
You want to just have the magnifying glass and only show the search bar by clicking on the magnifying glass?

Either the regular search bar or the one just like in the screen shot, but would prefer it to be the magnifying glass.

Dylan V · Apr 10, 2015

raioneru said:
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:

This is the solution to give you an idea of how to reproduce as shown in your screenshot. You must custom as you want.

raioneru · Apr 10, 2015

Dylan V said:

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!

XF 1.4 Navigation Bar

raioneru

New member

Dylan V

Well-known member

raioneru

New member

bwfcwalshy

Member

raioneru

New member

Dylan V

Well-known member

raioneru

New member

Dylan V

Well-known member

raioneru

New member

Dylan V

Well-known member

raioneru

New member

Similar threads

We value your privacy