Navbar Dropdown Responsive


Topic: Navbar Dropdown Responsive

Miresh pro premium priority asked 7 years ago

I have a navbar with three dropdowns. The drop downs are quite long. When going responsive, i cannot scroll on the dropdowns.  

Marta Szymanska staff pro premium answered 7 years ago

Hi, would you provide the code showing the problem? Best, Marta

Miresh pro premium priority answered 7 years ago

The code is as follows: -
<!--Navbar-->
 <nav class="navbar navbar-expand-lg navbar-light peach-gradient fixed-top scrolling-navbar">
 <div class="container">
 <a class="navbar-brand" href="#"><img src="../img/ourhuddlefull.png" height="50px" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
 <ul class="navbar-nav mr-auto">
 <li class="nav-item">
 <a class="nav-link" href="../../index.html">Home</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" id="navbarDropdownTour" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tour</a>
 <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownTour">
 <a class="dropdown-item" href="tour_all.aspx">All Features</a>
 <div class="dropdown-divider"></div>
 <a class="dropdown-item" href="tour_member.aspx">Member Management</a>
 <a class="dropdown-item" href="tour_group.aspx">Grouping Members</a>
 <a class="dropdown-item" href="tour_newsfeed.aspx">Communicating with Members</a>
 <a class="dropdown-item" href="tour_events.aspx">Managing your calendar</a>
 <a class="dropdown-item" href="tour_activities.aspx">Track Activities/Performance of Members</a>
 <a class="dropdown-item" href="tour_communication.aspx">Unified, Interactive Communications</a>
 <a class="dropdown-item" href="tour_cms.aspx">Content Management System</a>
 <a class="dropdown-item" href="tour_contrrol.aspx">Full Control</a>
 <a class="dropdown-item" href="tour_mobile.aspx">Mobile Application</a>
 </div>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" id="navbarDropdownCommunities" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Types of Communities</a>
 <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownCommunities">
 <a class="dropdown-item" href="Community/business.aspx">Businesses</a>
 <a class="dropdown-item" href="Community/creche.aspx">Creches</a>
 <a class="dropdown-item" href="Community/cricket.aspx">Cricket Clubs</a>
 <a class="dropdown-item" href="Community/golf.aspx">Golf Clubs</a>
 <a class="dropdown-item" href="Community/soccer.aspx">Football Clubs</a>
 <a class="dropdown-item" href="Community/watch.aspx">Neighbourhood Watch</a>
 <a class="dropdown-item" href="Community/school.aspx">Schools</a>
 </div>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="pricing.aspx">Pricing</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="support.aspx">Support</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" id="navbarDropdownTour" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Learn More</a>
 <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownTour">
 <a class="dropdown-item" href="more_security.aspx">Security</a>
 <a class="dropdown-item" href="more_casestudy.aspx">Case Studies</a>
 <a class="dropdown-item" href="more_roadmap.aspx">Road Map</a>
 <div class="dropdown-divider"></div>
 <a class="dropdown-item" href="more_about.aspx">About Us</a>
 </div>
 </li>
 </ul>
 <div class="form-inline">
 <a class="btn btn-outline-white btn-sm" href="signup.aspx"><font size="1">Sign Up<br />as a community</font></a>
 <div class="btn-group">
 <button type="button" class="btn btn-orange" onclick="location = '../../login.aspx';">Log In</button>
 <button type="button" class="btn btn-orange dropdown-toggle px-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 <span class="sr-only">Toggle Dropdown</span>
 </button>
 <div class="dropdown-menu dropdown-menu-right btn-orange">
 <a class="dropdown-item btn-orange " href="../../NewRegister.aspx"><font color="white">Register as New User</font></a>
 </div>
 </div>

</div>
 </div>
 </div>
 </nav>
  You can see the site: http://escape.dedicated.co.za/ourhuddlenew/
                                                                                    

Ollie Vincent pro answered 7 years ago

Hi, I would try giving .dropdown .dropdown-menu a fixed height and overflow-y:scroll for mobile devices using media queries Thanks
Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No