Topic: fixed scrolling navbar
Brandon Matthews free asked 6 years ago
.top-nav-collapse is not working on the MDB free version. I know that this class is added via JS, but maybe something is broken with the code. How do I fix this?
html
<!-- Main navigation -->
<header>
<!-- Navbar -->
<navclass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<divclass="container">
<aclass="navbar-brand"href="#">
<imgsrc="./assets/images-videos/circuit (1).png">
</a>
<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarTogglerDemo02"aria-controls="#navbarTogglerDemo02"
aria-expanded="false"aria-label="Toggle navigation">
<spanclass="navbar-toggler-icon"></span>
</button>
<divclass="collapse navbar-collapse"id="#navbarTogglerDemo02">
<ulclass="navbar-nav mr-auto smooth-scroll">
<liclass="nav-item">
<aclass="nav-link"href="#home">Home
<spanclass="sr-only">(current)</span>
</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#about"data-offset="90">About</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#portfolio"data-offset="90">Projects</a>
</li>
<liclass="nav-item">
<aclass="nav-link"href="#contact"data-offset="90">Contact</a>
</li>
</ul>
<!-- Social Icon -->
<ulclass="navbar-nav nav-flex-icons">
<liclass="nav-item">
<aclass="nav-link">
<iclass="fa fa-linkedin white-text"></i>
</a>
</li>
<liclass="nav-item">
<aclass="nav-link">
<iclass="fa fa-github white-text"></i>
</a>
</li>
<liclass="nav-item">
<aclass="nav-link">
<iclass="fa fa-facebook white-text"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Full Page Intro -->
<divclass="view">
<videoclass="video-intro"poster="https://mdbootstrap.com/img/Photos/Others/background.jpg"playsinlineautoplaymutedloop>
<sourcesrc="./assets/images-videos/powerful-energy-core_zk1z_tzzs__D.mp4"type="video/mp4">
</video>
<!-- Mask & flexbox options-->
<divclass="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<divclass="container px-md-3 px-sm-0">
<!--Grid row-->
<divclass="row wow fadeIn">
<!--Grid column-->
<divclass="col-md-12 mb-4 white-text text-center main-heading">
<h3class="display-3 mb-0 pt-md-5 pt-5 wow slideInRight">Brandon
<aclass="amber-text"> Matthews</a>
</h3>
<hrclass="hr-light my-4 w-75">
<h4class="subtext-header mt-2 mb-4 wow slideInLeft">Designer | Developer | Diligent.</h4>
<ahref="#!"class="btn btn-lg btn-rounded btn-outline-amber waves-effect white-text wow slideInUp">
View Projects
</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
<!-- Full Page Intro -->
</header>
css
/* Required for full background image */
html, body, header, .view {
height: 100%;
}
@media (max-width: 740px) {
html, body, header, .view {
height: 100vh;
}
}
.top-nav-collapse {
background-color: black!important;
}
.navbar:not(.top-nav-collapse) {
background: transparent!important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: black!important;
}
}
@media (min-width: 800px) and (max-width: 850px) {
.navbar:not(.top-nav-collapse) {
background: black!important;
}
}
.rgba-gradient {
background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: linear-gradient(to45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Josip Tomašev priority commented 6 years ago
Hi Brandon, As you can see on freebies pages, eg. link https://mdbootstrap.com/previews/free-templates/landing-page/form.html, fixed scroling navbar work fine with free version of MDB. Something else in your source is wrong, but editor messed up this what you posted so I can't see what's wrong. Greetings, Josip