admin管理员组文章数量:1420938
I am building my first page using Bootstrap Studio and I am wondering how I could achieve a menu design like this, or similar: /
When I click on menu toggle, it looks like this: .jpg
My website link: /
Thanks for any advice
<nav class="navbar navbar-light navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="/assets/img/Logo.png?h=9093bdbc164804385c272277c0ab9d7f"></a>
<button data-toggle="collapse" class="navbar-toggler custom-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="width: 30px;height: 30px;"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Úvod</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Služby</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Ukázky práce</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Náš příběh</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Akademie</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kariéra</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kontakt</a></li>
<li class="nav-item d-lg-flex d-xl-flex align-items-lg-center align-items-xl-center social-icons" role="presentation"><img class="social-icon-image" src="/assets/img/Facebook.png?h=261a62c570931f4fc3acbc1b33ae74d3"><img class="social-icon-image" src="/assets/img/Insta.png?h=be50f2dccc1bf2ad3d65a5104a48300d"></li>
</ul>
</div>
</div>
</nav>
[1]: .jpg
I am building my first page using Bootstrap Studio and I am wondering how I could achieve a menu design like this, or similar: https://codemyui./fullscreen-overlay-navigation-menu/
When I click on menu toggle, it looks like this: https://i.sstatic/WPu07.jpg
My website link: https://kreatika.bss.design/
Thanks for any advice
<nav class="navbar navbar-light navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="/assets/img/Logo.png?h=9093bdbc164804385c272277c0ab9d7f"></a>
<button data-toggle="collapse" class="navbar-toggler custom-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="width: 30px;height: 30px;"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Úvod</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Služby</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Ukázky práce</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Náš příběh</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Akademie</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kariéra</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kontakt</a></li>
<li class="nav-item d-lg-flex d-xl-flex align-items-lg-center align-items-xl-center social-icons" role="presentation"><img class="social-icon-image" src="/assets/img/Facebook.png?h=261a62c570931f4fc3acbc1b33ae74d3"><img class="social-icon-image" src="/assets/img/Insta.png?h=be50f2dccc1bf2ad3d65a5104a48300d"></li>
</ul>
</div>
</div>
</nav>
[1]: https://i.sstatic/c5Dnp.jpg
- 2 This question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. – Paulie_D Commented Aug 9, 2019 at 11:59
- @Paulie_D Sorry, I don't know how to make it more specific. I added the image of the actual state of the menu. I just need to make my menu as it is in added showcase under the first link. – Jaccob Commented Aug 9, 2019 at 12:07
1 Answer
Reset to default 6https://i.sstatic/M9VgZ.png
If its just a fixed fading menu with centered .navbar-nav, then the below answer might help. Though there are a lot of examples in your first link so hard to tell what you want exactly.
I've still not found away to disable the Bootstrap 4 navbar .collapsing toggle class. I can't find anything in the documentation to turn it off, which means you always have a height transition when opening/closing the mobile navbar.
But you can override the .collapsing class with CSS, though seems a little hacky for such a simple thing.
After a bit of fiddling I found I could override the collapsing class animation using .collapsing[style*="height"].
Bootstrap 4 natively adds the attribute style="height:...px;" to the .navbar-collapse div via javascript when the .navbar-toggler button is first clicked. But not on the second closing click.
See my codeply example link below using Bootstrap 4... (using SASS).
https://www.codeply./go/GXRF6aA5Du
.navbar {
.navbar-toggler {
z-index: 1000;
}
.navbar-collapse {
@include media-breakpoint-down(md) {
background: rgba(#000,.85);
opacity: 0;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
&.collapse {
opacity: 0;
pointer-events: none;
display: flex;
}
&.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important;
}
&.collapsing {
opacity: 0;
height: 100vh;
}
&.collapse.show {
opacity: 1;
pointer-events: auto;
}
.navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto;
}
}
}
}
@include media-breakpoint-down(md) {
.navbar-nav {
margin-left: initial !important;
}
}
This is the CSS output below if your not using SASS.
If you drop the below CSS into the DOM on your site it looks like this...
https://i.sstatic/M9VgZ.png
.navbar .navbar-toggler{
z-index:1000
}
@media (max-width: 991.98px){
.navbar .navbar-collapse{
background:rgba(0,0,0,0.85);
opacity:0;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
transition:opacity 0.35s ease;
display:flex;
flex-direction:column;
align-content:center;
text-align:center !important
}
.navbar .navbar-collapse.collapse{
display:flex;
opacity:0;
pointer-events:none
}
.navbar .navbar-collapse.collapsing[style*="height"]{
opacity:1;
height:100vh !important
}
.navbar .navbar-collapse.collapsing{
opacity:0;
height:100vh
}
.navbar .navbar-collapse.collapse.show{
opacity:1;
pointer-events:auto
}
.navbar .navbar-collapse .navbar-nav{
margin-right:initial !important;
margin-top:auto;
margin-bottom:auto
}
}
@media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
}
And a stackoverflow demo too using the CSS (not the sass)...
MAIN {
padding-top: 30px;
padding-bottom: 30px;
margin-top: 56px;
height: 3000px
}
.navbar .navbar-toggler {
z-index: 1000
}
@media (max-width: 991.98px) {
.navbar .navbar-collapse {
background: rgba(0, 0, 0, 0.85);
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
overflow-y: scroll;
overflow-x: hidden
}
.navbar .navbar-collapse.collapse {
display: flex;
opacity: 0;
pointer-events: none
}
.navbar .navbar-collapse.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important
}
.navbar .navbar-collapse.collapsing {
opacity: 0;
height: 100vh
}
.navbar .navbar-collapse.collapse.show {
opacity: 1;
pointer-events: auto
}
.navbar .navbar-collapse .navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto
}
}
@media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
} <link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<a class="btn btn-lg btn-primary" href="/docs/4.2/ponents/navbar/" role="button">View navbar docs »</a>
</div>
</main>本文标签： javascriptHow to style fullscreen menu under default bootstrap togglerStack Overflow
版权声明：本文标题：javascript - How to style fullscreen menu under default bootstrap toggler? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745328361a2653695.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论