A separate navigation for categories

Hello! A few years ago there was a topic for something similar to this but I sadly can't find it anymore. I basically want another navigation under the main navigation; it would be like jumping between the categories. If I have 3 categories, for example "welcome", "life" and "chat", I would like to have three buttons below the main navigation and when I would click one, the forum would only display that one category. Is it clear what I mean?

Thanks in advance!

 Helpful Tricks "n" Tips:
https://help.forumotion.com/t102748-navbar-menu
https://help.forumotion.com/t120381-customize-your-toolbar-through-css-and-javascript

Yes I remember that thread also but sadly It looks like it stopped working so it was removed from the forum.

The links you've sent me might help me create that second navigation anyways?

Hi,

I propose to you a system of tabs with an addition to the navbar

Creating an HTML page

ACP - Modules - HTML & JAVASCRIPT - Create an HTML page

Name this page and remember to check YES to Use the top and bottom of the page :



Then paste this into the body of the page :

Code:

<div id="menu">
            
 <div id="active" class="menu">
       <a href="url page 1">Titre de l'onglet</a>      
 </div>
            
 <div class="menu">
       <a href="url page 2">Titre de l'onglet</a>      
 </div>
            
 <div class="menu">
       <a href="url page 3">Titre de l'onglet</a>      
 </div>
            
 <div class="menu">
       <a href="url page 4">Titre de l'onglet</a>      
 </div>
</div>

Add to this code as many pages as you want by adding this part,

Just before the last tag :

Code:

</div>

Add this:

Code:

<div class="menu">
       <a href="url page">Titre de l'onglet</a>      
 </div>

Think about validating

Then add this code to the CSS

Code:


  *{
 margin:0;
 padding:0;
}
#menu{
 float:left;
 background:#e7474e;
 margin:0 auto;
 height:50px;
}
.menu{
 float:left;
 width:100px;
 height:45px;
 text-align:center;
}
.menu a{
 display:block;
 height:30px;
 padding-top:15px;
}
.menu a:link, .menu a:visited{
 text-decoration:none;
 color: #000000;
 font-family:verdana, sans-serif;
 font-size:12px;
 background:#abc url(fond.jpg) 0 -45px;
}
.menu#activ a:link, .menu#activ a:visited{
 background:#abc url(fond.jpg);
 color: #000000;
}
.menu a:hover, .menu a:active, .menu a:focus{
 background:#abc url(fond.jpg) 0 -90px;
 color: #339933;
}
.menu#activ a:hover, .menu #activ a:active, .menu#activ a:focus{
 background:#abc url(fond.jpg);
 color: #339933;
}

Think about validating

To be able to use this page it is necessary to recover its url
Go back to the Management of HTML pages and click on the eye for the page concerned



This will visualize your new page



Copy the link that is in the address bar of your browser, for example:

Code:

https://caforum.forumactif.com/h1-caforum

Add the link to the navbar

ACP - Affichage - Home Page - Header and Navigation

Click on "Add a custom menu"

In the Menu and Text sections fill in the name of this new menu
In the redirection url part, copy the link of the page in this form:

Code:

/h1-caforum

Select permissions
Then save

This new menu will be placed at the bottom of the page



With the help of the up and down arrows position where you want it on the navbar


Link for the final rendering: https://lesforums.caforum.fr/h1-caforum