gpt4 book ai didi

html - 如何移动导航栏?

转载 作者:行者123 更新时间:2023-11-28 15:05:14 24 4
gpt4 key购买 nike

一直在使用模板,我想尝试移动导航栏。但这似乎并不那么容易,看来我必须更改 CSS。有人可以帮我吗?

这是 HTML 以及网站目前的样子: enter image description here

我想将它移到左上角,这是我相信我可以做到的 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;

如果有人能提供帮助,我们将不胜感激!

最佳答案

假设你的 header-nav 元素是汉堡图标,你可以删除 right:0 并设置

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

关于html - 如何移动导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49535067/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com