Problema Visualizzazione Menu su template personalizzato

[xenox75]

Buonasera,

Ho provato a creare il template da zero,
ho seguito un tutorial e visto un pò come è fatto Protostar

Dal pannello Amministrativo sono riuscito a mettere la tab Advanced con alcuni parametri che mi personalizzo, tipo Logo, colore di background, ecc (giusto per testarne il funzionamento e vedere come sfruttarli nell'index.php)

Sono riuscito a disabilitare il Bootstrap di joomla (ver 2.X) e a mettere il bootstrap 4.5

Gli articoli, i moduli e il menù si vedono, ma trovo un pò di difficoltà con le personalizzazioni.

In particolare il Menu, mi si vedono come semplici link mentre li vorrei tipo pulsanti (come quelli che ci sono in https://getbootstrap.com/docs/4.5/components/navs/)

L'esempio che vorrei riprodurre è questo:

Codice: [Seleziona]

<ul class="nav nav-pills" role="tablist">
               <li class="nav-item">
                 <a class="nav-link active" data-toggle="pill" href="#home">Home[/url]
               </li>
               <li class="nav-item">
                 <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1[/url]
               </li>
               <li class="nav-item">
                 <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2[/url]
               </li>
              </ul>
in pratica:
La classe sulla ul (class="nav nav-pills") sono riuscito a metterla (si può dal modulo menu)
la classe su li (class="nav-item") sono riuscita a metterla mediante una funzione javascript tipo questa

Codice: [Seleziona]

var ul = document.getElementsByTagName("li");
for (var i = 0; i < ul.length; i++) {
    if (ul[i].className.includes("item")) {
        ul[i].className = 'nav-item';
    }
}

ora mi manca invece la parte del link esempio
<a href="/Siti_Prove/joomla_39_Demo/index.php" >Home

che dovrebbe essere con la classe:
1> class="nav-link active" => se attivo
2> class="nav-link" => se non attivo

Qui trovo difficoltà, qualcuno di voi, specie chi crea template da zero, saprebbe consigliare come fare?
O ci sono metodi differenti che mi facilitano il compito, di cui non sono a conoscenza?

o provato con il javascript cercando l'elemento per TAG "a", ma poi mi modifica tutti i link e non è quello che vorrei.

In alternativa ho provato a fare la copia del template di Protostar e poi modificarlo, aggiungendo posizioni, field e un pò di css, ma sarei limitato dal fatto che usa il bootstrap 2.x, io invece volevo provare a rifare tutto da zero, ma per mia inesperienza, qualche difficoltà la sto trovando :-)

[giusebos]

ti consiglio di guardare uno dei tanti video sul tubo su come realizzare un menù responsive con bootstrap, vedrai che con facilità lo applicherai a joomla.

Una considerazione: se hai usato protostar per costruire il tuo template, il menù dovrebbe essere bello che funzionante.....quindi, perchè ricostruirlo?

[xenox75]

Una considerazione: se hai usato protostar per costruire il tuo template, il menù dovrebbe essere bello che funzionante.....quindi, perchè ricostruirlo?

No, forse mi sono espresso male...
Se parto dalla base di Protostar va bene, il menù è funzionate, ma si basa sul bootstrap 2.X...
Io invece volevo provare a creare il template da zero e la difficoltà la sto trovando sul Menu, in quanto joomla di base imposta le classi del bootstrap 2.x che, spesso, non sono le stesse del bootstrap 4.5 e le dovrei "sovrascrivere"

[giusebos]

guarda la differenza delle classi tra boostrap 2 e 4 e sostituiscile, prima però fai un override del menu, altrimenti al primo aggiornamento perderai tutto