我有一个导航栏,右侧是导航栏品牌,中间是菜单元素,右侧是社交链接。我已将navbar-collapse
和collapse
类添加到包含这些项目的div。Bootstrap 3菜单项在小屏幕上消失
但是,当我调整屏幕大小在768px以下时,除navbar-header
之外的每个项目都消失。
我错过了什么?
HTML文件:
<div class="container-fluid page">
<div class="nav navbar navbar-default" role="navigation" style="z-index: 3">
<div class="navbar-header">
<a class="navbar-brand" routerLink="/home">
NAME SURNAME
</a>
</div>
<div class="navbar-collapse collapse">
<!-- Social links -->
<ul id="middleMenu" class="nav navbar-nav navbar-center">
<li>
<a id="home" class="menu-link" routerLink="/home" routerLinkActive="active">
<i class="fa fa-home fa-2x menu-image"></i>
<i class="menu-text">HOME</i>
</a>
</li>
<li>
<a id="about" class="menu-link" routerLink="/about" routerLinkActive="active">
<i class="fa fa-user-secret fa-2x menu-image"></i>
<i class="menu-text">ABOUT</i>
</a>
</li>
<li>
<a id="skills" class="menu-link" routerLink="/skills" routerLinkActive="active">
<i class="fa fa-code fa-2x menu-image"></i>
<i class="menu-text">SKILLS</i>
</a>
</li>
<li>
<a id="work" class="menu-link" routerLink="/work" routerLinkActive="active">
<i class="fa fa-cog fa-2x menu-image"></i>
<i class="menu-text">MY WORK</i>
</a>
</li>
<li>
<a id="contact" class="menu-link" routerLink="/contact" routerLinkActive="active">
<i class="fa fa-envelope fa-2x menu-image"></i>
<i class="menu-text">CONTACT</i>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="fa fa-github fa-lg social-link" target="_blank" href="$">
</a>
</li>
<li>
<a class="fa fa-twitter fa-lg social-link" target="_blank" href="$">
</a>
</li>
<li>
<a class="fa fa-linkedin fa-lg social-link" target="_blank" href="$">
</a>
</li>
</ul>
</div>
</div>
<div id="particles-js"></div>
<!-- <router-outlet></router-outlet>
--></div>
</body>
SCSS文件:
$element-color: #08fdd8;
$fade_time: 0.5s;
.fa:hover {
color: $element-color !important;
}
#middleMenu li {
width: 70px;
.menu-text {
white-space: nowrap;
text-align: center;
display: none;
color: $element-color !important;
}
.menu-image {
//display: block;
margin-left: 8px;
margin-top: -5px;
visibility: visible;
opacity: 1;
animation: fadein $fade_time;
}
&:hover {
color: $element-color !important;
.menu-image {
display: none;
visibility: hidden;
opacity: 0;
animation: fadeout $fade_time;
}
.menu-text {
display: block;
visibility: visible;
opacity: 1;
animation: fadein $fade_time;
}
}
}
//@media (min-width: $break-size) {
.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
display: inline-block;
white-space: nowrap
}
//}
.navbar-brand {
color: #ffffff !important;
}
.navbar-brand:hover {
color: $element-color !important;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.fa, .navbar-brand {
transition: color 0.2s ease;
}
演示:https://jsfiddle.net/moph4wto/
“我缺少什么?” - 代码在你的问题,为初学者。 jsFiddles很棒,但你的问题必须由它自己负责。我会从你的小提琴中取出代码。 –