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

XF 1.2 Add custom strip menu on top of the header

Discussion in 'Styling and Customization Questions' started by xhuzen, Sep 25, 2013.

  1. xhuzen

    xhuzen Member

    Hi, how can I add a custom navigation menu on top of a header? I think it is possible, because i found this Xenforo site http://www.cyclechat.net/ that has a strip of navigation menu on top of its header (Cycling, Technology, Business, Pets etc). How can I achieve the same output?

    Any help is appreciated.
     
  2. RoldanLT

    RoldanLT Well-Known Member

    HTML source of that menu:
    HTML:
    <!-- Clickfinity links -->
    <div id="forum-admin-menu" class="pageWidth">
    <div id="forum-admin-top">
    <div class="forum-admin-top">
    <ul>
    <li><a href="http://www.cyclechat.net/">Cycling</a></li>
    <li><a href="http://www.geekschat.net/">Technology</a></li>
    <li><a href="http://www.mybusinesschat.net/">Business</a></li>
    <li><a href="http://www.mypetchat.net/">Pets</a></li>
    <li><a href="http://www.gardeningchat.net/">Gardening</a></li>
    <li><a href="http://www.photographerschat.net/">Photography</a></li>
    <li><a href="http://www.foodieschat.net/">Cooking</a></li>
    <li><a href="http://www.entertainmentchat.net/">Entertainment</a></li>
    </ul>
    </div>
    </div>
    </div>
    <!-- Clickfinity site links -->
    Use Google Chrome's Inspect Element.
     
    xhuzen likes this.
  3. xhuzen

    xhuzen Member

    thanks for your response RoldanLT,

    Where can i possibly put this code? I tried putting it in the header.php but it appears at the bottom of the site.
     
    Last edited: Sep 25, 2013
  4. RoldanLT

    RoldanLT Well-Known Member

    Bottom part of "logo_block" template.
     
    xhuzen likes this.
  5. Tracy Perry

    Tracy Perry Well-Known Member

    I modified my PAGE_CONTAINER and below the </head> and include a custom template (name it whatever you want) and then style it via the EXTRA.css
    I did this in about 5 minutes. I had to put it above since on my style it didn't really look good anywhere else.
    screenshot.png screenshot.png
     
    xhuzen likes this.
  6. xhuzen

    xhuzen Member

    Thanks for your prompt response Tracy Perry, your suggestion solved my problem :D
     
    Tracy Perry likes this.
  7. Tracy Perry

    Tracy Perry Well-Known Member

    No problem... if you made a custom template and only want it visible from the main forum index page then you can wrap the template you made in a conditional
    Code:
    <xen:if is="{$contentTemplate} == 'forum_list'">
    <div id="my-forums-top">
    <div class="my-forums-top">
    <div class="my_sites">
    Other forums we run
    </div>
    <ul>
    <li><a href="http://twowheeldemons.com/">Motorcycles</a> | </li>
    <li><a href="http://mustangbit.com/">Ford Mustangs</a> | </li>
    <li><a href="http://darkskywatch.com/">Astronomy</a> | </li>
    <li><a href="http://wetalkcameras.com/">Cameras</a></li>
    </ul>
    </div>
    </div>
    </xen:if>
     
    xhuzen likes this.
  8. xhuzen

    xhuzen Member

    Thanks again Tracy Perry, this could be a great help for future updates on our site :D
     
    Last edited: Sep 25, 2013
  9. Marileah

    Marileah Member

    Hi, I did the same process on this, but is there any idea on how to make this custom navigation be responsive?
     
  10. Tracy Perry

    Tracy Perry Well-Known Member

    Same method but use the
    Code:
    @media (max-width:@maxResponsiveNarrowWidth)
    format to wrap them in (Refer to @Brogan's support links on any of his posts for more info). I should be able to help in a bit but right now I'm tracking down a missing language file problem in one of my myBB forums.

    An example would be

    Code:
    /* Responsive No Mood icons*/
    @media (max-width:@maxResponsiveNarrowWidth)
    {
    .userMood {display:none;}
    }
    /* End Responsive No Mood Icons*/
    
    /* Responsive Disable Moods */
    @media (max-width:@maxResponsiveNarrowWidth)
    {
    .userMood {display:none;}
    }
    /* End Responsive */
    
    but instead of doing display:none you will use CSS to control how you want it displayed (that's if you have given it a class two style with which if you followed the example you did). Just replace the .userMood with the class and the CSS instructions.
     
    Last edited: Oct 19, 2013
  11. Marileah

    Marileah Member

    thanks @Tracy Perry for quick reply, do you have any idea how to replace the top navigation, into drop down form icon? when responsive.
    upload_2013-10-19_15-23-40.png
    Untitled-3.jpg
     
    Last edited: Oct 19, 2013
  12. Marileah

    Marileah Member

    Im having a hard time to make the custom top navigation be responsive, still i have not solve it. can some one help me here.

    dipolog.com/community
     
  13. Tracy Perry

    Tracy Perry Well-Known Member

    I believe the CSS controller for that is #navigation .menuIcon, so you may want to play with using EXTRA.css to define an image for it.
     
  14. Marileah

    Marileah Member

    Thanks @Tracy Perry for your respond, could you give me a bit idea on how to play the #navigation .menuIcon , i tried and the lines icon appears but the navigation list is not appearing when I click it. how to make them show?
     
  15. Tracy Perry

    Tracy Perry Well-Known Member

    Are you trying to get it to show like that in a non-responsive view?
    I'm working on setting up a server to serve out VPS's right now so may not get a chance to look at it in depth.
     
  16. Marileah

    Marileah Member

    It's Ok now @Tracy Perry, thanks for the advice... :)
     

Share This Page