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.
 

rdn

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