Yoyo Tutorial Easy Responsive Vs Unresponsive Menjadi

How TO - Responsive Header

Learn how to create a responsive header with CSS.

Change the design of the header depending on the screen size. Resize the browser window to see the effect.

Create A Responsive Header

/* 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;  }}

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Track your progress - it's free!

Offenbar hast du diese Funktion zu schnell genutzt. Du wurdest vorübergehend von der Nutzung dieser Funktion blockiert.

Wenn dies deiner Meinung nach nicht gegen unsere Gemeinschaftsstandards verstößt,