Saya fikir ini mungkin membantu anda: CSS @media Rule. Seperti yang anda lihat dalam tutorial, CSS mempunyai cara untuk menyemak lebar skrin.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Dalam contoh ini, apabila lebar kurang daripada 600 piksel, warna latar belakang akan ditetapkan kepada biru muda. Menggunakan peraturan ini, anda boleh menukar CSS anda dengan sewajarnya.

Anda harus cuba melaksanakannya sendiri dan bukannya hanya copy-paste daripada internet. Teruskan dan berseronok menggunakan CSS itu satu-satunya cara untuk mempelajarinya.

Ini ialah kod CSS yang diubah suai untuk melaksanakan menu hamburger responsif:

CSS (styles.css):

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
}

.menu-toggle {
    width: 30px;
    height: 30px;
    background-color: #fff;
    cursor: pointer;
    display: none; /* 在较大屏幕上默认隐藏菜单图标 */
}

.menu-toggle::before, .menu-toggle::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
}

.menu {
    display: flex;
    align-items: center;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu li {
    padding: 10px;
}

.menu a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

/* 移动设备的媒体查询 */
@media only screen and (max-width: 767px) {
    .menu {
        display: none; /* 在小屏幕上默认隐藏菜单 */
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 50px;
        right: 0;
        width: 100%;
    }

    .menu.active {
        display: flex; /* 激活时显示菜单 */
    }

    .menu li {
        width: 100%;
        text-align: center;
    }

    .menu-toggle {
        display: block; /* 在小屏幕上显示菜单图标 */
    }
}