CSS:菜单未定位到右侧? [英] CSS: Menu not positioned to the right side?

问题描述

我尝试了所有我知道的东西，但我的汉堡菜单图标只是不想向右移动...有谁知道到底是什么让它保持在左边?

我也在使用 SemanticUI.

这是我的代码:https://jsfiddle.net/657pxedq/5/

HTML:

<div class="openbtn" onclick="openNav()"><i class="bars icon"></i></div>
<脚本>函数 openNav() {document.getElementById("mySidebar").style.width = "250px";document.getElementById("main").style.marginRight = "250px";document.getElementById("dimmer").style.display = "block";}函数 closeNav() {document.getElementById("mySidebar").style.width = "0";document.getElementById("main").style.marginRight = "0";document.getElementById("dimmer").style.display = "none";}<脚本>window.onscroll = function() {myFunction()};var navbar = document.getElementById("navbar");var sticky = navbar.offsetTop;函数 myFunction() {如果(window.pageYOffset >=粘性){navbar.classList.add("粘性")} 别的 {navbar.classList.remove("粘性");}}

CSS:

.openbtn {字体大小:20px；光标:指针；颜色:#744a84；填充:10px 15px；边界:无；背景色:透明；右:0；justify-content:对；浮动:对；文本对齐:右；}#导航栏{位置:固定；溢出:隐藏；背景色:透明；显示:弹性；justify-content:对；宽度:100%；z-索引:2；文本对齐:右；}.sticky {位置:固定；顶部:0；宽度:100%；}

(呃，由于代码太多，Stackoverflow 想让我添加更多细节……但我不知道该说些什么)

提前致谢！

解决方案

汉堡菜单可以通过添加 position:fixed 固定到右侧

.openbtn {字体大小:20px；光标:指针；颜色:#744a84；填充:10px 15px；边界:无；背景色:透明；右:0；justify-content:对；位置:固定；文本对齐:右；}

更新了 JSFiddle - https://jsfiddle.net/q2svn48p/

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!

解决方案

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/

这篇关于CSS:菜单未定位到右侧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！