Utilizing the Animated Bootstrap Navbar Dropdown from startbootstrap.com has presented a challenge. When attempting to incorporate a secondary menu option labeled "Interests" with dropdown items such as "Sport" and "Travel", an unexpected issue arises. The Curriculum Vitae dropdown menu seems to override the desired "Interests" selection. As someone who is new to Bootstrap, I suspect that there may be a mistake in how the code is arranged. Any guidance or assistance on this matter would be greatly appreciated.
/* Adjust this breakpoint if you modify the navbar's breakpoint */
@media (min-width: 992px) {
.animate {
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
}
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform: translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(1rem);
opacity: 0;
}
}
@-webkit-keyframes slideIn {
0% {
-webkit-transform: transform;
-webkit-opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-webkit-opacity: 1;
}
0% {
-webkit-transform: translateY(1rem);
-webkit-opacity: 0;
}
}
.slideIn {
-webkit-animation-name: slideIn;
animation-name: slideIn;
}
/* Additional page styles unrelated to the animated dropdown */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Síofra Kelleher</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Curriculum Vitae
</a>
<div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">About Me</a>
<a class="dropdown-item" href="#">Experience</a>
<a class="dropdown-item" href="#">Education</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact Me</a>
</div>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My Interests
</a>
<div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Sports</a>
<a class="dropdown-item" href="#">Travel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact Me</a>
</div>
<!-- Utilize the .animate and .slide-in classes within your .dropdown-menu for seamless integration -->
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<h1 class="mt-5 text-white font-weight-light">Síofra Kelleher's IS1113 Web Development Project</h1>
<p class="lead text-white-50">Insert some pretty words here</p>
</div>