XF 1.2 Add custom strip menu on top of the header

[xhuzen]

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]

HTML source of that menu:

<!-- 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]

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.

 

[rdn]

Bottom part of "logo_block" template.

 

[TPerry]

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.

 

[xhuzen]

Thanks for your prompt response Tracy Perry, your suggestion solved my problem

 

[TPerry]

Thanks for your prompt response Tracy Perry, your suggestion solved my problem

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

<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]

Thanks again Tracy Perry, this could be a great help for future updates on our site

 

[Marileah]

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

 

[TPerry]

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

@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

/* 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.

 

[Marileah]

thanks @Tracy Perry for quick reply, do you have any idea how to replace the top navigation, into drop down form icon? when responsive.

 

[Marileah]

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

 

[TPerry]

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.

 

[Marileah]

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?

 

[TPerry]

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.

 

[Marileah]

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