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

Discussion in 'Styling and Customization Questions' started by raioneru, Apr 10, 2015.

  1. raioneru

    raioneru New Member

    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
     
  2. Dylan V

    Dylan V Well-Known Member

    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: Apr 10, 2015
    raioneru likes this.
  3. raioneru

    raioneru New Member

    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. bwfcwalshy

    bwfcwalshy Member

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

    raioneru New Member

    Thanks!
     
  6. Dylan V

    Dylan V Well-Known Member

    Where you want to put the search bar? You want like your screenshot?
     
  7. raioneru

    raioneru New Member

    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.
     
  8. Dylan V

    Dylan V Well-Known Member

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

    raioneru New Member

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

    Dylan V Well-Known Member

    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.
     
    Varma and raioneru like this.
  11. raioneru

    raioneru New Member

    You have no idea how much this helps, thank you!
     

Share This Page