问为什么当我调整窗口大小时，导航栏会从屏幕上消失？
EN

Stack Overflow用户

提问于 2020-09-05 19:00:19

回答 1查看 35关注 0票数 1

我正在尝试制作我的第一个作品集，但我遇到了这个我无法解决的问题。我仍然在尝试让所有的元素都能正确地调整大小，但导航栏是我的首要任务。实际上，每当我缩小页面的宽度时，导航栏就会上升，离开屏幕。希望有人知道如何解决这个问题，提前感谢您的帮助。这就是代码。

@import url(//db.onlinewebfonts.com/c/4aa3e37e571255737e5e6d4e9d9770a5?family=Rockwell);
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*{
    margin: 0;
    padding: 0;
}
.wrapper{
    margin-left: auto;
    margin-top: auto;
    width: 100%;
}
body{
    background-color: #222326;
}
.nav-bar{
    margin-top: 100px;
    transform: translateY(-870px);
    background-color: #0C0C0D;
    width: 380px;
    padding: 18px;
    border-radius: 50px;
    margin-left: 33%;
}
.nav-bar>a{
    text-decoration: none;
    color: #3A3B40;
    padding-left: 4%;
    position: relative;
}
.nav-bar>a>h4{
    display:inline;
    font-family: 'Raleway', sans-serif;
}

.contactme-link{
    border-right: 1px solid #88898C;
    margin-left: 1%;
    margin-right: 2%;
    padding-right: 3%;
}

.skills-link{
    border-right: 1px solid #88898C;
    padding-right: 3%;
}
.myworks-link{
    margin-left: 2%;
}

.bg{
    background: url('background.jpg');
    position: relative;
    padding-right: 100%;
    padding-bottom: 66.6%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -2;
    border-radius: 0 0 70px 70px;
}

.layer{
    background-color: rgba(34,35,38,.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 0 0 70px 70px;

}

.me{
    margin-left: 25%;
    margin-top: 20px;
    transform: translateY(-870px);
}

.face{
    background: url('face-bw.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 590px;
    border-radius: 60px;
    margin-left: 75px;
    width: 475px;
}

.black-box{
    background-color: #0C0C0D;
    width: 585px;
    text-align: center;
    padding: 25px 20px 25px 20px;
    border-radius: 50px;
    margin-top: -115px;
}

.black-box>h1{
    color: #D9D9D9;
    font-family: 'Rockwell', sans-serif;
    font-size: 68px;

}
.black-box>h4{
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    color: #3A3B40;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Andrea Testini Portfolio</title>
</head>
<body>
    <div class="wrapper">
        <div class="presentation">
            <div class="bg">
                <div class="layer"></div>
            </div>
            <div class="nav-bar">
                <a href="#contact-me" class="contactme-link">
                    <h4>CONTACT ME</h4>
                </a>
                <a href="#skills" class="skills-link">
                    <h4>SKILLS</h4>
                </a>
                <a href="#my-works" class="myworks-link">
                    <h4>MY WORKS</h4>
                </a>
            </div>
            <div class="me">
                <div class="face"></div>
                <div class="black-box">
                    <h1>Andrea Testini</h1>
                    <h4>Programmer and Web Developer</h4>
                </div>
            </div>
            
        </div>
    </div>
</body>
</html>

<!---->

portfolio

html

css

回答 1

Stack Overflow用户

发布于 2020-09-05 19:15:52

在.nav-bar中将width: 380px;更改为max-width: 380px;，就可以了

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63753171

复制

相似问题

问为什么当我调整窗口大小时，导航栏会从屏幕上消失？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么当我调整窗口大小时，导航栏会从屏幕上消失？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么当我调整窗口大小时，导航栏会从屏幕上消失？
EN