CSS: 菜单没有定位到右侧？

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

（呃，由于代码太多，Whosebug 希望我添加更多细节...但我不知道该说些什么）

提前致谢！

Answer 1

汉堡包菜单可以通过添加 position:fixed 固定在右边

.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: 菜单没有定位到右侧？

CSS: Menu not positioned to the right side?

html

css

position

semantic-ui

hamburger-menu