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

XF 1.1 How to Create Navigation Tabs in Xenforo?

Discussion in 'XenForo Questions and Support' started by xhuzen, Jul 5, 2013.

  1. xhuzen

    xhuzen Member

  2. EQnoble

    EQnoble Well-Known Member

  3. xhuzen

    xhuzen Member

  4. Brogan

    Brogan XenForo Moderator Staff Member

    If you are linking to an external page, edit the navigation template and add the relevant a href code.
     
    xhuzen likes this.
  5. EQnoble

    EQnoble Well-Known Member

    Paste this in the navigation template based on where you want the button to appear.

    Code:
    <li class="navTab PopupClosed"><a href="http://dipolog.com/places/attractions/" class="navLink">Test Tab</a></li>
     
    xhuzen likes this.
  6. xhuzen

    xhuzen Member

    Thanks, the code you had given works great :D But i have a sub category of one of the additional navigation tabs, can you share some of your knowledge on how to add a sub category? Their are codes that Xenforo used that i don't know, i tried creating like this:

    <li class="navTab PopupClosed"><a href="http://dipolog.com/category/articles/" class="navLink">City Guidex</a>
    <ul class="secondaryContent blockLinksList">
    <li><a href="http://dipolog.com/key-facts/"></a></li>
    <li><a href="http://dipolog.com/nightlife/"></a></li>
    <li><a href="http://dipolog.com/things-to-do/"></a></li>
    <li><a href="http://dipolog.com/history/"></a></li>
    </ul>
    </li>

    but it doesn't work.
     
  7. EQnoble

    EQnoble Well-Known Member

    Replace that entire block with this...
    HTML:
                <li class="navTab dipolog {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}">
               
                    <a href="http://dipolog.com/category/articles/" class="navLink">City Guide</a>
                    <a href="http://dipolog.com/category/articles/" class="SplitCtrl" rel="Menu"></a>
                   
                    <div class="{xen:if {$tabs.dipolog.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} membersTabLinks">   
                        <div class="primaryContent menuHeader">
                            <h3>Other Stuff</h3>
                            <div class="muted">other stuff links</div>
                        </div>
                        <ul class="secondaryContent blockLinksList">
                            <li><a href="http://dipolog.com/key-facts/">Key Facts</a></li>
                            <li><a href="http://dipolog.com/nightlife/">Night Life</a></li>
                            <li><a href="http://dipolog.com/things-to-do/">Things to do</a></li>
                            <li><a href="http://dipolog.com/history/">History</a></li>
                        </ul>
                    </div>   
                </li>
     
    xhuzen likes this.
  8. xhuzen

    xhuzen Member

    Thank you EQnoble, I tried the code and it worked well :) Great support (y)
     
  9. EQnoble

    EQnoble Well-Known Member

    No problem...for future reference when requesting help with styling or customizations it would be better to post in this category ->
    http://xenforo.com/community/forums/styling-and-customization-questions.47/

    This way your thread will be exposed to more people who look there with the intention to help people do basic customizations to their board...as it happens I only saw your thread because it was at the top of the list in 'new posts'. Not a big deal as this sort of fits in this category, but for your benefit you will have your questions exposed to more of the community who helps with this sort of stuff.

    Welcome to the community and I wish you great success.
     
    xhuzen likes this.
  10. xhuzen

    xhuzen Member

    ok EQnoble, It just happened that I thought I was in the right category hehehehe my mistake, anyways thank you for your immediate respond :)
     

Share This Page