matrix.org/sass/_header.scss

.site-header {
    position: fixed;
    z-index: 1000;
    --header-padding: 1.5dvw;
    --header-vertical-padding: 8px;

    display: flex;
    width: 100%;
    height: var(--navbar-height);
    padding-left: 20px;
    align-items: center;
    margin-bottom: 0;

    font-size: 1.125rem;
    color: #fff;

    background-color: #000;

    @media screen and (min-width: 768px) {
        padding-right: 10px;
    }

    @media screen and (min-width: 1000px) {
        padding-right: 20px;
    }

    .brand {
        margin-right: auto;

        img {
            width: 128px;
            height: 55px;
            display: block;
        }
    }

    .dropdown-button {
        font-family: 'webflow-icons';
        font-size: 1.5rem;

        padding: 0 1rem;

        // Make the button take the full height
        align-self: stretch;
        display: flex;
        align-items: center;

        @media screen and (min-width: 768px) {
            display: none;
        }
    }

    nav {
        display: flex;

        @media screen and (max-width: 767px) {
            position: fixed;
            z-index: 800;
            top: 5.937rem;
            left: 0;
            right: 0;

            flex-direction: column;
            background-color: #000;

            max-height: calc(100vh - 5.937rem);
            overflow-y: auto;
        }

        @media screen and (min-width: 768px) {
            align-items: center;
        }

        a {
            color: #fff;
            font-size: 1.125rem;

            @media screen and (max-width: 767px) {
                font-size: 1.5rem;
            }

            padding: var(--header-vertical-padding) var(--header-padding);

            &:hover {
                color: #0082f3;
            }

            &.current {
                color: #0082f3;
            }

            &.primary {
                border-radius: 60px;
                background-color: #fff;
                color: #000 !important;


                padding-inline: clamp(1em, 3dvw, 2em);
                margin-inline: .5rem;

                @media screen and (max-width: 767px) {
                    margin-top: 1.2rem;
                    text-align: center;
                }

                @media screen and (min-width: 768px) {
                    &:not(:last-child) {
                        margin-right: 12px;
                    }
                }
            }
        }

        .submenu-checkbox {
            opacity: 0;
            position: absolute;

            @media screen and (max-width: 767px) {
                &:not(:checked)~.section-submenu-wrap {
                    display: none;
                }

                &:not(:checked)~.submenu-title {
                    .arrow {
                        background-image: url("/assets/down-arrow.svg");
                        width: 1rem;
                        height: 1rem;
                        margin: auto 0;
                        filter: invert(1);
                    }
                }

                &:checked~.submenu-title {
                    .arrow {
                        background-image: url("/assets/up-arrow.svg");
                        width: 1rem;
                        height: 1rem;
                        margin: auto 0;
                        filter: invert(1);
                    }
                }
            }
        }

        .submenu-title {
            @media screen and (max-width: 767px) {
                display: flex;
                flex-direction: row;
                gap: 1rem;

                font-size: 1.5rem;
            }

            label:hover {
                color: #0082f3;
            }

            margin: auto 0;

            padding: var(--header-vertical-padding) var(--header-padding);
        }

        label {
            cursor: pointer;
        }
    }

    @media screen and (min-width: 768px) {
        .section-wrap {
            position: relative;
            align-self: stretch;
            display: flex;
            justify-content: center;

            &:not(:hover, :focus-within) .section-submenu {
                display: none;
            }
        }

        .section-submenu-wrap {
            position: absolute;
            top: 47.5px;
        }

        .section-submenu {
            background: #fff;
            border: 1px solid #f4f4f4;
            border-radius: 6px;

            a {
                color: #000;
            }
        }
    }

    @media screen and (max-width: 767px) {
        .section-submenu {
            padding-left: 1em;
            display: flex;
            flex-direction: column;

            a {
                font-size: 1.125rem;
            }
        }

        .section-wrap {
            margin: 8px 0;
        }
    }
}

#site-header-dropdown-checkbox {
    display: none;

    @media screen and (max-width: 767px) {
        &:checked~.dropdown-button {
            background-color: #000;
        }

        &:checked~.page-overlay {
            position: fixed;
            z-index: 400;
            top: 5.937rem;
            right: 0;
            bottom: 0;
            left: 0;

            display: block;
        }

        &:not(:checked)~nav {
            display: none;
        }
    }
}