CSS: меню не расположено с правой стороны? - PullRequest
Новая
       34

CSS: меню не расположено с правой стороны?

0 голосов
/ 03 марта 2019

Я перепробовал все, что знаю, но мой значок меню бургера просто не хочет идти вправо ... Кто-нибудь знает, что на земле оставляет его?

Я также использую SemanticUI.

Вот мой код: 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%;
}

(угу, Stackoverflow хочет, чтобы я добавил больше деталей из-за большого количества кода ... но я не знаю, что еще сказать)

Заранее спасибо!

1 Ответ

0 голосов
/ 03 марта 2019

Меню гамбургера можно исправить вправо, добавив положение: исправлено, как указано ниже 

.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/

...