Question

我尝试了我所知道的一切，但是我的汉堡菜单图标只是不想向右走...有人知道到底是什么让它离开了吗？

我也在使用SemanticUI。

HTML：

<div id="navbar">
    <div class="openbtn" onclick="openNav()"><i class="bars icon"></i></div>
</div>

<script>
    function openNav() {
        document.getElementById("mySidebar").style.width = "250px";
        document.getElementById("main").style.marginRight = "250px";
        document.getElementById("dimmer").style.display = "block";
    }

    function closeNav() {
        document.getElementById("mySidebar").style.width = "0";
        document.getElementById("main").style.marginRight = "0";
        document.getElementById("dimmer").style.display = "none";
    }
</script>

<script>
    window.onscroll = function() {myFunction()};
    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;

    function myFunction() {
        if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
        } else {
            navbar.classList.remove("sticky");
        }
    }
</script>

CSS：

.openbtn {
    font-size: 20px;
    cursor: pointer;
    color: #744a84;
    padding: 10px 15px;
    border: none;
    background-color: transparent;
    right: 0;
    justify-content: right;
    float: right;
    text-align: right;
}

#navbar {
    position: fixed;
    overflow: hidden;
    background-color: transparent;
    display: flex;
    justify-content: right;
    width: 100%;
    z-index: 2;
    text-align: right;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

（哎呀，由于代码太多，Stackoverflow希望我添加更多详细信息……但我不知道该说些什么）

谢谢！

Answer 1

可以通过添加位置将汉堡包菜单固定在右侧：固定如下所示

.openbtn {
    font-size: 20px;
    cursor: pointer;
    color: #744a84;
    padding: 10px 15px;
    border: none;
    background-color: transparent;
    right: 0;
    justify-content: right;
    position: fixed;
    text-align: right;
  }

更新后的JSFiddle-https://jsfiddle.net/q2svn48p/

CSS：菜单没有位于右侧？

1 个答案: