Newsgroup: it.comp.www.html
Titolo: Aiuto per rimuovere barra titolo fissa

Salve,
 
 
sto approntando un piccolo sito partendo da un template css html5 che ho trovato in rete, questo nella fattispecie 
http://www.templatemo.com/tm-454-compass
 
 
 
 
Sto cercando i contenuti da inserire e nel frattempo vorrei fare delle sottopagine con la stessa struttura, ho rinominato la pagina index, ho rimosso dei div che non mi servono ma non capisco come si fa a rimuovere la barra dei menu che rimane agganciata alla pagina durante lo scorrimento, metto il link della pagina index e della sottopagina da cui vorrei rimuovere la barra, se mi deste qualche indicazione sul come procedere ve ne sarei grato.
 
Giovanni
 
http://caprileisure.com/prova/index.html#
 
 
http://caprileisure.com/prova/destinations.html#amalficoast
 
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 
http://caprileisure.com/prova/destinations.html#amalficoast
 
 
Ho guardato la tua prima prova.
Prova a rimuovere
position: fixed;
della classe
.main-header
nel file
css/templatemo-main.css


 
http://caprileisure.com/prova/destinations.html#amalficoast
 
 
beh con un:
 
display: none;
 
nella classe ".main-header" lo togli di mezzo. Ovviamente
modificando la classe ".main-header" poi non lo trovi anche
nella pagina iniziale, quindi l'ideale sarebbe creare una
nuova classe e richiamarla nella sotto pagina.
Per esempio, nel file CSS ci aggiungi:
 
/* questa classe la metti dopo la ".main-header" */
.main-header-no-header {
   display: none;
}
 
nel file HTML della sotto pagina inserisci:
 
<div class="main-header main-header-no-header"><!-- /.container -->
...
</div>
 
e così dovrebbe andare.


 }
 
La parte del CSS interessata e' la seguente:
 
.main-header {
 
  position: fixed;
 
  width: 100%;
 
  z-index: 9999;
 
  padding: 40px 0;
 
  background: white;
 
  -webkit-box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15) ;
 
  -moz-box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15) ;
 
  box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15) ;
 
  -webkit-transition: all 0.4s ease-in-out;
 
  -moz-transition: all 0.4s ease-in-out;
 
  -ms-transition: all 0.4s ease-in-out;
 
  -o-transition: all 0.4s ease-in-out;
 
  transition: all 0.4s ease-in-out;
 
}
 
 
Qui ci aggiungerei, come da tue istruzioni, le seguenti linee per far scomparire l'header:
 
.main-header-no-header {
    display: none;
 }
 
 
Ditemi se fin qui ci siamo cosi intanto edito il CSS e dopo passiamo al codice HTML per modificare il DIV
 
 
 
Grazie mille


ho modificato sia il css che l'html come da istruzioni ma la sbarra e' sempre li, non scorre ma occupa comunque dello spazio in alto, cosa posso fare?
 
http://caprileisure.com/prova/destinationsgallery.html
 
 
Grazie



class 'main-header' -> display:none; (o elimini del tutto il div)
id 'services' -> padding-top: -> elimina o scegli un valore adeguato, 
es. 20px
 
Ciao



Se modifico il css poi mi cambia tutte le pagine mentre vorrei eliminare quella fastidiosa barra solo da quella di cui sopra per poi utilizzare lo stesso codice per le altre sottopagine.
 
Il css per quella sezione al momento e' cosi:
 
#services .service-item .service-header {
 
  padding-bottom: 20px;
 
  clear: both;
 
ho seguito le istruzioni di cui sopra, il codice html per quel div e':
 
<div id="home">
        <div class="site-header">
            <div class="top-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="left-header">
                                <span><i class="fa fa-phone"></i>+39 347 xxx</span>
                                <span><i class="fa fa-envelope"></i>
in...@xxx.com
</span>
                            </div> <!-- /.left-header -->
                        </div> <!-- /.col-md-6 -->
                        <div class="col-md-6 col-sm-6">
                            <div class="right-header text-right">
                                <ul class="social-icons">
                                    <li><a href="#" class="fa fa-facebook"></a></li>
                                    <li><a href= "
https://www.instagram.com/xxx/
" target="new" class="fa fa-instagram"></a></li>
                                    <li><a href="
https://twitter.com/xxx
" target="new" class="fa fa-twitter"></a></li>
                                    <li><a href="
https://it.linkedin.com/pub/xxxxx/5/360/28
" target="new" class="fa fa-linkedin"></a></li>
                                </ul>
                            </div> <!-- /.left-header -->
                        </div> <!-- /.col-md-6 -->
                    </div> <!-- /.row -->
                </div> <!-- /.container -->
            </div> <!-- /.top-header -->
            <div class="main-header" main-header-no-header><!-- /.container -->
            </div> <!-- /.header -->
        </div> <!-- /.site-header -->
    </div>
 
grazie per l'aiuto!


 --
 
presupponendo che hai già impostato nel css:
.main-header-no-header { display:none; }
 
hai sbagliato l'aggiunta della classe, deve essere così:
  <div class="main-header main-header-no-header">



G R A N D I S S I M O ! ! !
 
Ora funziona, grazie mille!!! Posso ora adattare questa pagina ed usarla come template per le altre in cui dovrò mettere dei contenuti.
 
Calma, calma, non penserete che e' finita qui? 
 
Stay tuned e ancora mille grazie a tutti per i preziosi suggerimenti!
 
 
Giovanni
