我的网站上有以下导航栏。在全屏上一切正常,但是当屏幕尺寸减小到最大宽度992px时,我正在尝试将屏幕上的徽标居中放置,然后将折叠导航栏移到徽标内。
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img class="darklogo" href="#page-top" width="30%" src="img/redlogo.png" />
<img class="whitelogo" href="#page-top" width="30%" border="0" alt="null" src="img/whitelogo.png" />
</a>
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger selected" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
#mainNav .darklogo {
display: none;
}
#mainNav .whitelogo {
display: block;
}
#mainNav.navbar-shrink .darklogo {
display: block;
}
#mainNav.navbar-shrink .whitelogo {
display: none;
}
@media (max-width: 992px) {
#mainNav .whitelogo {
display: none;
}
#mainNav .darklogo {
width: 50%;
display: block;
}
}
我尝试添加:align-content = center,这不起作用。还尝试证明内容=中心。这也不起作用。
导航栏折叠也将出现在导航栏品牌(徽标)的下面吗?
答案 0 :(得分:1)
https://jsfiddle.net/xmcfn6r0/8/
如果您更改width
中的.darklogo
,还需要更改其left
的值。
@media (max-width: 992px) {
#mainNav .whitelogo {
display: none;
}
#mainNav .navbar-brand {
position: absolute;
left: 50%;
}
#mainNav .darklogo {
width: 50%;
position: relative;
left: -25%;
display: block;
}
}