Question

我在导航栏的全宽度打开移动版时遇到了麻烦。我试着尽可能地让它成功，但不知道我的问题是什么！我试图使用媒体，但我不知道该怎么做才能让它看起来像汉堡包的风格来来去去。我必须提到我使用纯CSS，所以我缺乏JS的知识。如果有人愿意帮助我，我会很沮丧，因为现在我卡住了，我不知道该怎么回事。

<nav class="navi" id="target">
<div class="menu">
    <a class="link-1" href="#">home</a>
    <a class="link-1" href="#">info</a>
    <a class="link-1" href="#">contact</a>
    <div class="logo">
    <a href="#"><img alt="Brand" src="logo2.png" height="40px" width="60px"></a>
    </div>
</div>

</nav>

这是导航的CSS：

width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;

text-align:right;
z-index:10;


}
.navi{
background: rgba(0,0, 0, 0.5);


}
.navi:hover{
background-color: rgba(0,0,0, 1);
}

.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;

text-decoration: none;
color:#fff;

padding: 3px 6px;

}


.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;

非常感谢！

Answer 1

我建议使用Bootstrap 3.转到getbootstrap.com确保将bootstrap的css和javascript页面包含到您的项目中。汉堡包式导航栏的代码应如下所示：

<div class="container" id="main">
<div class="container">
    <div class="navbar navbar-fixed-top navbar-default">
        <ul class="nav nav-pills unstyled">
            <li class=""><a href="#skills">Skills</a></li>
             <li><a href="#projects">Projects</a></li>
                 <li><a href="#footer">Contact </a></li>
        </ul>


<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>

注意：如果您在断点下方调整浏览器窗口大小，则只能看到汉堡包样式。

需要为我的导航创建移动版本失败

1 个答案: