如何将菜单移动到手机标题的左侧

问题描述

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

.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;
}

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

解决方法

要实现这一点，您必须做两件事。

首先，您需要更新汉堡包样式.open-panel类以使其在左侧对齐（当前，它是样式的绝对位置，因此您可以使用left属性将其放在左侧。）

第二，您需要使用.site-branding-logo a css属性将徽标图标链接样式right类更新为右对齐。

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

.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;
}

,

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

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