HEADER FISSO
La stiky bar non deve essere presente nel progetto
Se il vostro sito ha anche un blog sono emerse incompatibilità che potete visualizzare nell'immagine. In sostanza la barra laterale del blog passa sopra l'header e non dietro.
CODICE in codice e statistiche | ||
<style> #imHeaderBg, #imHeader, #imMnMn { position: fixed; z-index: 10; top: 0; /* Position the navbar at the top of the page */ width: 100%; /* Full width */ } </style> |
AGGIUNGI OMBRA HEADER FISSO
La stiky bar non deve essere presente nel progetto
AGGIUNGI L'OMBRA in codice e statistiche | ||
<style> /* ombra e bordo Header */ #imHeaderBg { border-bottom: 0px solid rgb(139, 154, 166); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } </style> |
TRASPARENZA HEADER FISSO
La stiky bar non deve essere presente nel progetto
CODICE in codice e statistiche Funziona solo fino ad una certa risoluzione | ||
<style> #imHeader_imMenuObject_02-menu-opened.animated {z-index: 50000 !important;} #imContent { position: relative !important; top: -120px !important; } #imHeader {z-index: 30000 !important;} /* Disabilita le regole tra 959.9px e 380px */ @media screen and (max-width: 959.9px) and (min-width: 380px) { #imHeader_imMenuObject_02-menu-opened.animated {z-index: initial !important;} #imContent { position: initial !important; top: initial !important; } #imHeader {z-index: initial !important;} } </style> |
STIKY BAR CHE SCENDE IN TRASPARENZA
Il codice va inserito in CODICE E STATISTICHE
CODICE in codice e statistiche | ||
<style> /* credit by Giuseppe Guida */ #imStickyBarGraphics { transition: 1s!important; } #imStickyBarContainer { transition: 1s!important; } #imStickyBarGraphics.myStickyBar { background: rgba(8, 69, 126, 1) !important; opacity: 1 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } #cookie-law-message .imCloseInn { font-size: 18px !important; display: inline-block; padding: 15px 50px !important; } </style> <script> $(document).scroll(function() { if ($(this).scrollTop() > 150) { $('#imStickyBarGraphics').addClass('myStickyBar'); } else { $('#imStickyBarGraphics').removeClass('myStickyBar'); } }); </script> |
OMBRA STIKY BAR
da mettere in codice e statistiche
CODICE in codice e statistiche | ||
<style> /* ombra e bordo sticky bar */ #imStickyBarContainer { border-bottom: 1px solid rgb(139, 154, 166); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } </style> |
NASCONDI STIKY BAR
da mettere sulla proprietà della pagina
CODICE in proprietà della pagina | ||
<style> #imStickyBarContainer {display:none !important;} </style> | ||
OPPURE (migliore) | ||
<style>#imStickyBarContainer div {display:none}</style> |