如何用CSS实现响应式导航栏logo与汉堡菜单大屏下固定左右侧

1. flex布局下子元素的float属性会自动失效，所以你之前尝试添加浮动属性无法生效属于正常现象，直接用flex本身的排布逻辑即可实现需求。
2. .nav-list虽然内部导航项默认隐藏，但元素本身仍处于正常文档流中，挤占了导航栏的中间空间，破坏了nav元素justify-content: space-between的两端对齐逻辑。
3. .nav-brand设置了z-index: -1，会导致logo层级低于父级header，可能出现位置偏移、点击失效的问题。
4. .hamburguer的left:0; right:0属于冗余属性，干扰了相对定位下的位置计算。

你只需要修改对应CSS块的配置即可：

/* 修复logo层级问题 */
.nav-brand{
    width: 60px!important;
    height: 60px!important;
    display: flex!important;
    /* 删掉原有z-index: -1!important; 规则 */
}

/* 让.nav-list移出正常文档流，不挤占导航栏空间 */
.nav-list{
    display: flex!important;
    list-style: none!important;
    position: absolute; /* 新增规则，移出正常流 */
    left: 0;
    top: 0;
}

/* 修复汉堡菜单定位冗余属性 */
.hamburguer{
    width: 40px!important;
    height: 40px!important;
    position: relative!important;
    cursor: pointer!important;
    z-index: 1500!important;
    /* 删掉原有left: 0px; right: 0px; 规则 */
}

如果你需要在宽度大于700px的大屏幕上显示横向导航项，隐藏汉堡菜单，可以补充以下媒体查询规则：

@media screen and (min-width: 701px) {
    /* 大屏幕隐藏汉堡 */
    .hamburguer {
        display: none!important;
    }
    /* 恢复导航列表正常流定位，显示内部导航项 */
    .nav-list {
        position: static!important;
    }
    .nav-item {
        visibility: visible!important;
    }
    .nav-link {
        transform: scale(1)!important;
    }
}

修改后nav的flex容器下只有logo和汉堡两个正常流子元素，justify-content: space-between规则会自动将两个元素分别推到导航栏的左右两侧，实现你要的效果。

内容的提问来源于stack exchange，提问作者Luc