Grundstil för header

Vi tar ett steg vidare och fyller på med CSS för att få till en grundläggande stil för vår header och navbar.

CSS för grundstil av header med navbar

Vi lägger till följande CSS i filen public/css/responsive-navbar.css.

CSS för grundstil av header med navbar i public/css/responsive-navbar.css

/* Header as a flex container with two columns */
.header {
  display: flex;                  /* Use flexbox */
  justify-content: space-between; /* Space between left and right columns */
  align-items: center;            /* Vertically center items */
  padding: 10px 20px;             /* Add some padding */
  background-color: #333;       /* Dark background color */
  color: white;                   /* White text color */
}

/* Left column - logo */
.logo {
  font-size: 1.5em;               /* Increase font size for logo */
}

/* Right column - navigation bar */
.navbar {
  position: relative;              /* Optional: needed if dropdown uses absolute positioning */
}

Vi placerar headern i en flexbox om två kolumner där logotypen är i den vänstra kolumnen och navigationsmenyn i den högra kolumnen. Vi använder justify-content: space-between för att placera logotypen längst till vänster och navigationsmenyn längst till höger.

Vi laddar om sidan och får följande utseende.

Bild: Nu börjar header bli stylad med flexbox.

×