• 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

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

RoldanLT

Well-known member
#2
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.
 
#3
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:

Tracy Perry

Well-known member
#5
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.
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
 

Tracy Perry

Well-known member
#7
Thanks for your prompt response Tracy Perry, your suggestion solved my problem :D
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>
 

Tracy Perry

Well-known member
#10
Hi, I did the same process on this, but is there any idea on how to make this custom navigation be responsive?
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:
#12
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
 

Tracy Perry

Well-known member
#13
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
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
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?
 

Tracy Perry

Well-known member
#15
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?
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.