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

XF 1.2 Problem with the navtabs

Discussion in 'Styling and Customization Questions' started by Matthew Hawley, Dec 9, 2013.

  1. Matthew Hawley

    Matthew Hawley Well-Known Member

    Okay when the forum tab is selected, when you hover over it the tablinks drop down. But when other tabs are selected you can't. Here is a video.

    http://www.screenr.com/UMwH

    Any suggestions? :)
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    That looks like a severally customized navigation template. Can you share the code?
     
  3. Matthew Hawley

    Matthew Hawley Well-Known Member

    @Russ made it BTW

    Code:
    <xen:edithint template="navigation.css" />
    
    <div class="navWrapper">
    <div id="navigation" class="pageWidth {xen:if $canSearch, withSearch}">
        <div class="pageContent">
            <nav>
    
    <div class="navTabs">
        <ul class="publicTabs">
            <li class="navTab">
                <div id="logo"><a href="{$logoLink}">
                    <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
                    <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
                    </a>
                </div>
            </li>
            <!-- home -->
            <xen:if is="{$showHomeLink}">
                <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
            </xen:if>
          
          
            <!-- extra tabs: home -->
            <xen:if is="{$extraTabs.home}">
            <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
                <xen:if is="{$extraTab.linksTemplate}">
                    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
              
                    <a href="{$extraTab.href}" class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                  
                    <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                      
                        {xen:raw $extraTab.linksTemplate}
                    </div>
                </li>
                <xen:else />
                    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                        <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                    </li>
                </xen:if>
            </xen:foreach>
            </xen:if>
          
          
            <!-- forums -->
            <xen:if is="{$tabs.forums}">
                <li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed">
              
                    <a href="{$tabs.forums.href}" class="navLink NoPopupGadget" rel="Menu">{$tabs.forums.title}</a>
                  
                    <div class="{xen:if {$tabs.forums.selected}, 'selectedMenu'} Menu JsOnly tabMenu forumsTabLinks">
                      
                        <ul class="secondaryContent blockLinksList">
                        <xen:hook name="navigation_tabs_forums">
                            <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                            <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                            <xen:if is="{$visitor.user_id}">
                                <li><a href="{xen:link 'watched/forums'}">{xen:phrase watched_forums}</a></li>
                                <li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>
                            </xen:if>
                            <li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
                        </xen:hook>
                        </ul>
                    </div>
                </li>
            </xen:if>
          
          
            <!-- extra tabs: middle -->
            <xen:if is="{$extraTabs.middle}">
            <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
                <xen:if is="{$extraTab.linksTemplate}">
                    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
              
                    <a href="{$extraTab.href}" class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                  
                    <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                      
                        {xen:raw $extraTab.linksTemplate}
                    </div>
                </li>
                <xen:else />
                    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                        <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                    </li>
                </xen:if>
            </xen:foreach>
            </xen:if>
          
          
            <!-- members -->
            <xen:if is="{$tabs.members}">
                <li class="navTab members {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}">
              
                    <a href="{$tabs.members.href}" class="navLink NoPopupGadget" rel="Menu">{$tabs.members.title}</a>
                  
                    <div class="{xen:if {$tabs.members.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} membersTabLinks">
                      
                        <ul class="secondaryContent blockLinksList">
                        <xen:hook name="navigation_tabs_members">
                            <li><a href="{xen:link members}">{xen:phrase notable_members}</a></li>
                            <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">{xen:phrase registered_members}</a></li></xen:if>
                            <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                            <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                        </xen:hook>
                        </ul>
                    </div>
                </li>
            </xen:if>              
          
            <!-- extra tabs: end -->
            <xen:if is="{$extraTabs.end}">
            <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
                <xen:if is="{$extraTab.linksTemplate}">
                    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
              
                    <a href="{$extraTab.href}" class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                  
                    <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                      
                        {xen:raw $extraTab.linksTemplate}
                    </div>
                </li>
                <xen:else />
                    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                        <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                    </li>
                </xen:if>
            </xen:foreach>
            </xen:if>
    
            <!-- responsive popup -->
            <li class="navTab navigationHiddenTabs Popup PopupControl PopupClosed" style="display: none;">  
                          
                <a rel="Menu" class="navLink NoPopupGadget"><span class="menuIcon">{xen:phrase menu}</span></a>
              
                <div class="Menu JsOnly blockLinksList primaryContent" id="NavigationHiddenMenu"></div>
            </li>
              
          
            <!-- no selection -->
            <xen:if is="!{$selectedTab}">
                <li class="navTab selected"><div class="tabLinks"></div></li>
            </xen:if>
          
        </ul>
      
        <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
    </div>
    
    <span class="helper"></span>
              
            </nav>  
        </div>
    </div>
    </div>
    
     
    Last edited: Dec 9, 2013
  4. Matthew Hawley

    Matthew Hawley Well-Known Member

  5. Steve F

    Steve F Well-Known Member

    What style is this?
     
  6. Russ

    Russ Well-Known Member

  7. Matthew Hawley

    Matthew Hawley Well-Known Member

    I didn't edit it at all.
     
  8. Russ

    Russ Well-Known Member

    Not really sure than, I could of applied the edit wrong on the extras tab. I'll have time in a week or so to try to get that in the RM in a more stable version.
     
  9. Matthew Hawley

    Matthew Hawley Well-Known Member

    Actually I removed the primary headers
     

Share This Page