Topic: Navbar Dropdown Responsive
Marta Szymanska staff pro premium answered 7 years ago
Miresh pro premium priority answered 7 years ago
<!--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
.dropdown .dropdown-menu
a fixed height
and overflow-y:scroll
for mobile devices using media queries
Thanks FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No