如何在移动设备上将菜单移动到 header 的左侧

Question

我需要将页面右侧的“汉堡包”菜单更改为左侧。这是一个实时网站 link。本网页以“Bulk”为主题而建。该图标具有以下样式：

.open-panel {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 25px;
        left: 22px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        z-index: 2;
    }
    .shrink .open-panel {
        top: 14px;
    }
    .open-panel span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #000;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    .open-panel span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .open-panel span:nth-child(2) {
        top: 9px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .open-panel span:nth-child(3) {
        top: 18px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    .open-panel.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: -2px;
        left: 3px;
    }
    .open-panel.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }
    .open-panel.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 21px;
        left: 3px;
    }

左侧的徽标具有以下样式：

.site-branding-logo {
    float: left;
}
.site-branding-logo a {
    border: none;
    z-index: 9999;
    position: absolute;
}
.site-branding-logo img {
    max-height: 70px;
    width: auto;
    padding-right: 10px;
}

我需要更改哪些行才能获得左侧的菜单和右侧的图标？

Answer 1

要实现它，您必须做两件事。

首先，您需要更新汉堡包样式 .open-panel class 以左对齐（目前，它是样式的绝对位置，因此您可以使用 [=12 将其放在左侧=] 属性。)

其次，您需要使用 right css 属性更新徽标图标 link 样式 .site-branding-logo a class 以右对齐。

以下代码是实现它们的更改。

.open-panel {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 25px;
    left: 22px;  /* Replace `right` attribute to `left` attribute. */
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 2;
}

.site-branding-logo a {
    border: none;
    z-index: 9999;
    position: absolute;
    right: 0;
}

Answer 2

将 .site-branding-logo css 更改为 float: right; 并从 @media (max-width: 767px) .open-panel 中删除 right: 22px。

如果您不希望徽标显示在其他屏幕宽度的左侧，则必须确保有一个仅适用于移动屏幕尺寸的媒体查询。

如何在移动设备上将菜单移动到 header 的左侧

How to move menu to left side of header on mobile

html

css

styling