CSS: Menu not positioned to the right side?

问题

I tried everything I know but my burger menu icon just don't want to go to the right... Does anyone know what on earth keeps it left?

I'm also using SemanticUI.

Here's my code: https://jsfiddle.net/657pxedq/5/

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

(uggh, Stackoverflow wants me to add more details because of so much code... but I don't know what more to say)

Thanks in advance!

回答1:

The hamburger menu can be fixed to the right by adding position:fixed as given below

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

Updated JSFiddle - https://jsfiddle.net/q2svn48p/

来源：https://stackoverflow.com/questions/54969977/css-menu-not-positioned-to-the-right-side

标签

html

css

position

semantic-ui

hamburger-menu