如何移动导航栏？

Question

正在使用模板，我想尝试移动导航栏。但它看起来很简单，似乎我不得不改变CSS。能帮到我吗？

这里是HTML以及网站到目前为止的展示方式：

我想把它移到左下角，这是我认为我可以做的CSS代码：

    .header-nav {
    background: #0C0C0C;
    color: rgba(255, 255, 255, 0.25);
    font-family: "montserrat-light", sans-serif;
    font-size: 1.3rem;
    line-height: 1.846;
    padding: 3.6rem 3rem 3.6rem 3.6rem;
    height: 100%;
    width: 280px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 700;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    visibility: hidden;
}

.header-nav a, .header-nav a:visited {
    color: rgba(255, 255, 255, 0.5);
}

.header-nav a:hover,
.header-nav a:focus,
.header-nav a:active {
    color: white;
}

.header-nav h3 {
    font-family: "montserrat-semibold", sans-serif;
    font-size: 11px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .25rem;
    margin-bottom: 4.8rem;
    margin-top: .9rem;
    color: #39b54a;
}

.header-nav p {
    margin-bottom: 2.7rem;
}

.header-nav__content {
    position: relative;
    left: 50px;
    opacity: 0;
    visibility: hidden;

如果有人能提供帮助，我将不胜感激！

Answer 1

假设您的header-nav元素是汉堡图标，您可以删除右：0并设置

.header-nav {
...
left:0;
...
}

Answer 2

我认为这就是你想要的：

将以下css文件添加到您的项目中： https://mladenplavsic.github.io/bootstrap-navbar-sidebar/navbar-fixed-left.min.css

并添加＆＃39; navbar-fixed-left＆＃39;标记到您的导航＆＃39;元件。

如果您想阅读有关它的所有信息，请访问以下网站： https://mladenplavsic.github.io/bootstrap-navbar-sidebar/

您可以在页面的支气码中找到代码