Topic: FAB 'on hover' Moves to Top Nav Area

Fitrepreneur pro asked 7 years ago

Hello - When I hover over the FAB the main floating icon moves up to the top nav. here is my code: <!--Navbar--> <nav class="navbar navbar-dark navbar-fixed-top scrolling-navbar"> <!-- Collapse button <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx"> <i class="fa fa-bars"></i> </button> --> <div class="container"> <!--Collapse content--> <div class="collapse navbar-toggleable-xs" id="collapseEx"> <!--Navbar Brand--> <!--Links <ul class="nav navbar-nav"> <li class="nav-item "> Who <li class="nav-item"> What <li class="nav-item"> How <li class="nav-item"> Why <li class="nav-item"> Get Fytns! <!-- Navbar icons--> <ul class="nav navbar-nav nav-flex-icons"> <li class="nav-item"> <i class="fa fa-linkedin fa-2x"></i> <li class="nav-item"> <i class="fa fa-twitter fa-2x"></i> <li class="nav-item"> <i class="fa fa-facebook fa-2x"></i> <!-- hide social <li class="nav-item"> <i class="fa fa-instagram"></i> <li class="nav-item"> <i class="fa fa-medium"></i> <li class="nav-item"> <i class="fa fa-product-hunt"></i> <li class="nav-item"> <i class="fa fa-youtube"></i> <li class="nav-item"> <i class="fa fa-behance"></i> <li class="nav-item"> ---/end hide social --> <li class="nav-item"> <i class="fa fa-dribbble fa-2x"></i> <li class="nav-item"> <i class="fa fa-codepen fa-2x"></i> <li class="nav-item"> <i class="fa fa-github fa-2x"></i> <li class="nav-item dropdown"> Signed in as Guest <div class="dropdown-menu dropdown-secondary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut"> Social Challenges Fytns Knowledge Tools Resources Profile Sign Out </div> <!-- <li class="nav-item"> <i class="fa fa-bars fa-2x"></i> --> </div> <!--/.Collapse content--> </div> </nav> <!--/.Navbar--> <!-- FAB--> <div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> <i class="fa fa-bars"></i> </div> <!-- /FAB--> <div id="myNav" class="overlay"> <i class="fa fa-times fa-2x"></i> <div class="overlay-content"> <!--Footer--> <!--Footer Links--> <div class="container-fluid"> <div class="row"> <div class="col-md-3 col-md-offset-1"> </div> <div class="col-md-6"> <p style="font-size:20px" class="blue-grey-text lighten-2">Building Global Fitness Brands</p> </div> </div> <br> <div class="row"> <!--Second column--> <div class="col-md-3 col-md-offset-1"> <h5 class="title teal-text">SECTIONS</h5> </div> <!--/.Second column--> <!--Third column--> <div class="col-md-3"> <h5 class="title teal-text">PARTNERS</h5> </div> <!--/.Third column--> <!--Fourth column <div class="col-md-2"> <h5 class="title teal-text">MEMBERS</h5> </div> <!--/.Fourth column--> <!--Fifth column--> <div class="col-md-3"> <h5 class="title teal-text">Signed In as Guest</h5> </div> <!--/.Fifth column--> </div> <!--Social buttons--> <footer class="page-footer deep-purple"> <div class="social-section"> </div> </footer> <!--/.Social buttons--> </div> <!--/.Footer Links--> </div> </div>

Hello, I already answered you via e-mail

Fitrepreneur pro answered 7 years ago

Hello - Follow up to my question above - the menu items with do not go to the intended section. JM

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes