Barra menu(oppure sidebar) fissa con protostar e jQuery

[davidepc]

In questa guida cerchero' di spiegare come rendere fisso un menu o una sidebar tramite javascript.
Link all'articolo:  http://www.joomla.it/e-ancora/articoli-community-3x/7666-barra-menu-oppure-sidebar-fissa-con-protostar-e-jquery.html

[ciroslitz]

Ottimo articolo, mi funziona solo con il menu di dx. mentre  il top menu di Protostar non va anche assegnando uno sfondo al menu quindi nel file template.css aggiungete .stick_menu{background-color:white;z-index:10000}

[davidepc]

Mettimi un link del sito dove hai problemi

[ciroslitz]

Le modifiche le avevo fatto in locale , ora le ho caricate su un sito online ma non cambia nulla:
http://www.xxxxxxxxxx.it/

[davidepc]

Nell'index.php del template (template/protostar/index.php)
dovresti modificare questa riga da cosi:

Codice: [Seleziona]

<nav class="navigation" role="navigation">a cosi

Codice: [Seleziona]

<nav class="navigation" role="navigation" id="navigation">

[ciroslitz]

Perfetto, ora funziona solo che il menu finisce dietro degli elementi la slide in home, pulsanti social, banner e video negli articoli. Devo dargli colore perchè trasparente

[ciroslitz]

Preciso che durante lo scroll le voci del top menu non sono cliccabili perchè dietro degli elementi.
ho dato colore ma non lo prende
 .stick_menu{background-color:grey;z-index:10000}

[davidepc]

Devi aggiungere in fondo nel file templates/protostar/css/template.css la riga da te sopra citata ovvero

Codice: [Seleziona]

.stick_menu{background-color:white;z-index:10000}

[ciroslitz]

Devi aggiungere in fondo nel file templates/protostar/css/template.css la riga da te sopra citata ovvero

Codice: [Seleziona]

.stick_menu{background-color:white;z-index:10000}

la riga è stata aggiunta nel personal css, ma il menu finisce spesso dietro

[davidepc]

Il problema che hai un errore nel personal.css.
Subito prima della riga aggiunta manca una graffa chiusa (quella della media query)
Per intenderci ti riporto il pezzo errato

Codice: [Seleziona]

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }
  .stick_menu{background-color:white;z-index:10000}Andrebbe modificato cosi' (aggiungendo una graffa chiusa)

Codice: [Seleziona]

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }
}
  .stick_menu{background-color:white;z-index:10000}

[ciroslitz]

Ok, perfetto. Ora devo solo sistemare i due menu al meglio.

[ciroslitz]

Scusa ultima cosa quale parametro andrebbe settato per la sidebar laterale per evitare che si sposti troppo verso sx cioè verso i contenuti?

[davidepc]

Prova ad aggiungere nei css

Codice: [Seleziona]

.stick_sidebar{margin-left:20px !important}


[ciroslitz]

Prova ad aggiungere nei css

Codice: [Seleziona]

.stick_sidebar{margin-left:20px !important}


Perfetto tutte modifiche ottime. Grazie 

[ciroslitz]

Mi dispiace.... ma sono di ritorno non mi quadra una cosa assurda,  quando mi loggo in home e solo nella prima pagina accade, dopo essermi loggato il menu si sposta verso sx tutto la pagina diventa in grassetto e il menu non resta fisso, mentre nella secondae altre pagine della home tutto funziona regolarmente anche da loggato.


PS Ulteriore precisazione avviene solo se l'utente ha i privilegi di editor quindi quando nel menu utente compare la voce invia  articolo

[ciroslitz]

Per non creare dubbi sul lavoro di davide pc che è perfetto con le modifiche consigliate.... per gli altri utenti preciso che facendo prove in locale, ho eliminato la modifica menu, ho cambiato anche templeate, ma quando mi loggo con profilo edito o admin sulla home page e solo sulla prima pagina diventa grassetto la sider di dx. quindi nulla di imputabile alle tue modifiche. Resta da capire solo cosa genera questo...... non è neppure il templeate, sto procedendo ora con le  estensioni.

Assurdo tutto dipendeva da un articolo che influiva.... non capisco come ma almeno ne sono venuto a capo

[davidepc]

Ciao probabilmente nell'articolo c'era qualche tag aperto e non chiuso (per tag intendo tipo i "div" i tag "b" del grassetto,etc...).

[ciroslitz]

Mi è stato segnalato che il menu non resta fisso su iOS (iPad). Ed alcuni invece con opera e chrome (preciso di non sapere la risoluzione e versione) il menù di dx si sposta a sx e ci resta coprendo articoli ( ho invitato ha pulire cache), in quanto dal mio opera e chrome non danno problemi per iPad non ho testato.

[davidepc]

Considera che se la risoluzione dello schermo e' inferiore a 768px il menu fisso non si attiva come puoi facilmente vedere dal codice che ho scritto nella guida.

[valpredina]

Ciao a tutti,
sto cercando di utilizzare questo script jquery per rendere fisso il menu orizzontale di un sito in via di sviluppo.
La cosa strana è che su Firefox funziona come ci si aspetterebbe, mentre su chrome funziona ma solo dopo che la pagina è stata scrollata di un certo valore (fino allo scroll completo dello slideshow che risiede in posizione banner). In firefox il menu è quindi sempre visibile mentra in chrome prima sparisce e poi misteriosamente riappare al top della pagina ....
Grazie in anticipo per l'aiuto
ah il sito per chi volesse rendersi conto del comportamento anomalo è http://www.arscapsa.joomlafree.it (in fase di sviluppo).


Come non detto, il menu era in posizione ma spariva dietro lo slider risolto con istruzione (ed era già scritto) 
.stick_menu{background-color:grey;z-index:10000}