Come fare per - Intestazione reattiva
Scopri come creare un'intestazione reattiva con CSS.
Intestazione reattiva
Modifica il design dell'intestazione in base alle dimensioni dello schermo. Ridimensiona la finestra del browser per vedere l'effetto.
Crea un'intestazione reattiva
Passaggio 1) Aggiungi HTML:
Esempio
<div class="header">
<a href="#default" class="logo">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
Passaggio 2) Aggiungi CSS:
Esempio
/* Style the header with a grey background and some padding */
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px
10px;
}
/* Style the header links */
.header a {
float:
left;
color: black;
text-align: center;
padding:
12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* Style the logo
link (notice that we set the same value of line-height and font-size to
prevent the header to increase when the font gets bigger */
.header a.logo
{
font-size: 25px;
font-weight: bold;
}
/*
Change the background color on mouse-over */
.header a:hover {
background-color: #ddd;
color: black;
}
/* Style the
active/current link*/
.header a.active {
background-color: dodgerblue;
color: white;
}
/* Float the
link section to the right */
.header-right {
float: right;
}
/* Add media queries for responsiveness - when the
screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
.header a {
float: none;
display:
block;
text-align: left;
}
.header-right {
float: none;
}
}
Suggerimento: vai al nostro tutorial CSS Navbar per saperne di più sulle barre di navigazione.