Hoe te maken: Responsieve paginakop

Leer hoe je een responsieve paginakop kunt maken met CSS.

Maak een responsive header

Eerste stap - Voeg HTML toe:

<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>

Tweede stap - Voeg CSS toe:

/* Gebruik een grijs achtergrond en enige inspringing om de titel stijl in te stellen */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
{}
/* Stel het stijl van de titel link in */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
{}
/* Stel het stijl van de logo link in (let op, we stellen de lijnhoogte en de lettergrootte in op dezelfde waarde om te voorkomen dat de kop afneemt als de lettergrootte groter wordt) */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
{}
/* Verander de achtergrondkleur bij hover */
.header a:hover {
  background-color: #ddd;
  color: black;
{}
/* Stel het stijl van de actieve/actuele link in */
.header a.active {
  background-color: dodgerblue;
  color: white;
{}
/* Voeg de link sectie naar rechts te floaten */
.header-right {
  float: right;
{}
/* Voeg een media query toe om responsief te zijn - als de scherm breedte 500px of minder is, stack de links samen */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  {}
  .header-right {
    float: none;
  {}
{}

Try it yourself

Related pages

Tutorial:CSS navigation bar