Drop down doesnt work properly in mobile view

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Drop down doesnt work properly in mobile view

rockrude pro asked 7 years ago

When the drop-down menu is used in the navbar. It looks quite odd.    

Damian Gemza staff answered 7 years ago

Dear rockrude, please provide me more information about your problem. What does it mean that it looks quite odd?  Please provide me some screenshots, code, environment information. Without this I'm unable to help you well. Best Regards, Damian

rockrude pro answered 7 years ago

Please have a look at these screenshots taken via a 5inch mobile. https://drive.google.com/open?id=1j6bqd53dFiPg8NI2uXRx12_zEw64S978   I am expecting it to behave like the way it does in the sidebar!  

Damian Gemza staff commented 7 years ago

Dear Rockrude, why your dropdown isn't hidden in hamburger? Please show me your code. Best Regards, Damian

rockrude pro answered 7 years ago

<header>
<mdb-navbarSideClass="navbar fixed-top navbar-expand-lg navbar-dark bg-blue scrolling-navbar intro-fixed-nav" [containerInside]="false">
<logo>
<aclass="logo navbar-brand"routerLink=""><strong>Virtual Auditor</strong></a>
</logo>
<links>
<ulclass="navbar-nav ml-auto">
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Incorporation<span class="caret"></span></a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<arouterLink="private-limited-company-registration"class="dropdown-item"mdbRippleRadius>Private Limited Company</a>
<arouterLink="one-person-company"class="dropdown-item"mdbRippleRadius>One Person Company</a>
<arouterLink="limited-liability-partnership"class="dropdown-item"mdbRippleRadius>Limited Liability Partnership</a>
<arouterLink="partnership-registration"class="dropdown-item"mdbRippleRadius>Partnership</a>
<arouterLink="proprietorship-registration-india-sole-proprietorship"class="dropdown-item"mdbRippleRadius>Sole Properitorship</a>
<arouterLink="public-limited-company"class="dropdown-item"mdbRippleRadius>Public Limited Company</a>
<arouterLink="nidhi-company-registration"class="dropdown-item"mdbRippleRadius>Nidhi Company</a>
<arouterLink="producer-company-registration"class="dropdown-item"mdbRippleRadius>Producer Company</a>
</div>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Registrations<span class="caret"></span></a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<arouterLink="gst-registration"class="dropdown-item"mdbRippleRadius>GST Registration</a>
<arouterLink="gst-registration-for-foreigners"class="dropdown-item"mdbRippleRadius>GST Registration for Foreginer</a>
<arouterLink="temporary-gst-registration"class="dropdown-item"mdbRippleRadius>Temporary GST Registration</a>
<arouterLink="tan-registration"class="dropdown-item"mdbRippleRadius>TAN Registration</a>
<arouterLink="professional-tax-registration"class="dropdown-item"mdbRippleRadius>Professional Tax</a>
<arouterLink="esi-registration"class="dropdown-item"mdbRippleRadius>ESI Registration</a>
<arouterLink="msme-registration"class="dropdown-item"mdbRippleRadius>MSME Registration</a>
<arouterLink="import-export-code"class="dropdown-item"mdbRippleRadius>Import Export Code</a>
<arouterLink="fssai"class="dropdown-item"mdbRippleRadius>FSSAI Registration</a>
<arouterLink="digital-signature"class="dropdown-item"mdbRippleRadius>Digital Signature</a>
</div>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Trademark & Copyright<span class="caret"></span></a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<arouterLink="trademark-registration"class=" dropdown-item"mdbRippleRadius>Trademark Registration</a>
<arouterLink="trademark-rectification"class=" dropdown-item"mdbRippleRadius>Trademark Rectification</a>
<arouterLink="trademark-objection"class=" dropdown-item"mdbRippleRadius> Trademark Objection</a>
<arouterLink="trademark-opposition"class=" dropdown-item"mdbRippleRadius>Trademark Opposition</a>
<arouterLink="trademark-renewal"class=" dropdown-item"mdbRippleRadius>Trademark Renewal</a>
<arouterLink="copyright-registration"class=" dropdown-item"mdbRippleRadius>Copyright Registration</a>
<arouterLink="about"class=" dropdown-item"mdbRippleRadius> Design Registration</a>
<arouterLink="provisional-patent-registration"class=" dropdown-item"mdbRippleRadius>Provisional Patent</a>
<arouterLink="patent-registration"class=" dropdown-item"mdbRippleRadius>Patent Registration</a>
</div>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Tax Filing<span class="caret"></span></a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<arouterLink="gst-return-filing"class=" dropdown-item"mdbRippleRadius> GST Filing</a>
<arouterLink="cancel-gst-registration"class=" dropdown-item"mdbRippleRadius> Cancel GST Registration</a>
<arouterLink="tds-return-filing-due-date"class=" dropdown-item"mdbRippleRadius> TDS Return</a>
<arouterLink="esi-return-filing-due-date"class=" dropdown-item"mdbRippleRadius>ESI Return</a>
</div>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Corproate Filing<span class="caret"></span></a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<arouterLink="company-name-change"class=" dropdown-item"mdbRippleRadius>Name Change</a>
<arouterLink="registered-office"class=" dropdown-item"mdbRippleRadius> Registered Office Change</a>
<arouterLink="appointment-of-director"class=" dropdown-item"mdbRippleRadius>Add Directors</a>
<arouterLink="resignation-of-director"class=" dropdown-item"mdbRippleRadius>Remove Directors</a>
<arouterLink="company-share-transfer"class=" dropdown-item"mdbRippleRadius>Share Transfer</a>
<arouterLink="memorandum-of-association-amendment"class=" dropdown-item"mdbRippleRadius>MOA Amendment</a>
<arouterLink="add-partner-llp"class=" dropdown-item"mdbRippleRadius> Add Partner</a>
<arouterLink="winding-up-of-a-company"class=" dropdown-item"mdbRippleRadius>Winding Up of Company</a>
<arouterLink="llp-winding-up"class=" dropdown-item"mdbRippleRadius>Winding Up of LLP</a>
<arouterLink="authorized-capital"class=" dropdown-item"mdbRippleRadius>Increase Authorized Capital</a>
</div>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Compliance<span class="caret"></span></a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<arouterLink="proprietorship-tax-return-filing"class=" dropdown-item"mdbRippleRadius>Proprietorship</a>
<arouterLink="partnership-tax-return-filing"class=" dropdown-item"mdbRippleRadius> Partnership</a>
<arouterLink="llp-annual-filing"class=" dropdown-item"mdbRippleRadius>Limited Liability Partnership</a>
<arouterLink="company-annual-filing"class=" dropdown-item"mdbRippleRadius>Private Limited Company</a>
</div>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownTogglemdbRippleRadiustype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Accounting<span class="caret"></span></a>
<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">
<arouterLink="accounting-bookkeeping-services"class="waves-effect"mdbRippleRadius>Maintain your Accounts</a>
<arouterLink="payroll-service"class="waves-effect"mdbRippleRadius> Payroll Service</a>
</div>
</li>
</ul>
</links>
</mdb-navbar>
</header>
<router-outlet></router-outlet>
<!--Section: Testimonials v.4-->
<section class="section text-center pb-4 white-text" style="background: linear-gradient(to right, #1976d2 , #2377C9);margin-top:30px;">
<!--Section heading-->
<h1class="section-heading h1 pt-4 white-text">SEE WHY 20,000 + STARTUPS LOVE US</h1>
<divclass="row">
<!--Carousel Wrapper-->
<mdb-carouselclass="carousel no-flex testimonial-carousel carousel-multi-item multi-animation slide wow fadeIn" [type]="'carousel-multi-item'" [animation]="'slide'">
<!--First slide-->
<mdb-slide>
<!--Grid column-->
<divclass="col-md-4">
<divclass="testimonial">
<!--Avatar-->
<divclass="avatar">
<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg"class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Anna Deynah</h4>
<h6class="white-text font-bold">Web Designer</h6>
<pclass="white-text"><iclass="fa fa-quote-left white-text"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!--Review-->
<divclass="white-text">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star-half-full"></i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-md-4 clearfix d-none d-md-block">
<divclass="testimonial">
<!--Avatar-->
<divclass="avatar">
<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg"class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>John Doe</h4>
<h6class="white-text font-bold">Web Developer</h6>
<pclass="white-text"><iclass="fa fa-quote-left white-text"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
<!--Review-->
<divclass="white-text">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-md-4 clearfix d-none d-md-block">
<divclass="testimonial">
<!--Avatar-->
<divclass="avatar">
<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg"class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Abbey Clark</h4>
<h6class="white-text font-bold">Photographer</h6>
<pclass="white-text"><iclass="fa fa-quote-left white-text"></i> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.</p>
<!--Review-->
<divclass="white-text">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star-o"></i>
</div>
</div>
</div>
<!--Grid column-->
</mdb-slide>
<!--/First slide-->
<!--Second slide-->
<mdb-slide>
<!--Grid column-->
<divclass="col-md-4">
<divclass="testimonial">
<!--Avatar-->
<divclass="avatar">
<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg"class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Blake Dabney</h4>
<h6class="white-text font-bold">Web Designer</h6>
<pclass="white-text"><iclass="fa fa-quote-left white-text"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.</p>
<!--Review-->
<divclass="white-text">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star-half-full"></i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-md-4 clearfix d-none d-md-block">
<divclass="testimonial">
<!--Avatar-->
<divclass="avatar">
<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(6).jpg"class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Andrea Clay</h4>
<h6class="white-text font-bold">Front-end developer</h6>
<pclass="white-text"><iclass="fa fa-quote-left white-text"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.</p>
<!--Review-->
<divclass="white-text">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-md-4 clearfix d-none d-md-block">
<divclass="testimonial">
<!--Avatar-->
<divclass="avatar">
<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(7).jpg"class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Cami Gosse</h4>
<h6class="white-text font-bold">Phtographer</h6>
<pclass="white-text"><iclass="fa fa-quote-left white-text"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
<!--Review-->
<divclass="white-text">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star-o"></i>
</div>
</div>
</div>
<!--Grid column-->
</mdb-slide>
<!--/Second slide-->
<!--Third slide-->
<mdb-slide>
<!--Grid column-->
<divclass="col-md-4">
<divclass="testimonial">
<!--Avatar-->
<divclass="avatar">
<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg"class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Bobby Haley</h4>
<h6class="white-text font-bold">Web Developer</h6>
<pclass="white-text"><iclass="fa fa-quote-left white-text"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.</p>
<!--Review-->
<divclass="white-text">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-md-4 clearfix d-none d-md-block">
<divclass="testimonial">
<!--Avatar-->
<divclass="avatar">
<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Elisa Janson</h4>
<h6class="white-text font-bold">Marketer</h6>
<pclass="white-text"><iclass="fa fa-quote-left white-text"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
<!--Review-->
<divclass="white-text">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star-half-full"></i>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-md-4 clearfix d-none d-md-block">
<divclass="testimonial white-text">
<!--Avatar-->
<divclass="avatar">
<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4>Robert Jacobs</h4>
<h6class="white-text font-bold">Front-end developer</h6>
<pclass="white-text"><iclass="fa fa-quote-left white-text"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.</p>
<!--Review-->
<divclass="white-text">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star-o"></i>
</div>
</div>
</div>
<!--Grid column-->
</mdb-slide>
<!--/Third slide-->
</mdb-carousel>
<!--Carousel Wrapper-->
</div>
</section>
<!--/Section: Testimonials v.4-->
<!--Section: Blog v.2-->
<section class="section container text-center pb-3">
<!--Section heading-->
<h2class="section-heading h1 pt-4">Recent posts</h2>
<!--Section description-->
<pclass="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!--Grid row-->
<divclass="row">
<!--Grid column-->
<divclass="col-lg-4 col-md-12 mb-r">
<!--Featured image-->
<divclass="view overlay hm-white-slight mb-2 waves-light"mdbRippleRadius>
<a>
<divclass="mask"></div>
</a>
</div>
<!--Excerpt-->
<ahref=""class="pink-text"><h6class="mb-3 mt-3"><iclass="fa fa-map "></i><strong> Adventure</strong></h6></a>
<h4class="mb-3">This is title of the news</h4>
<p>by <a><strong>Billy Forester</strong></a>, 15/07/2016</p>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus voluptas.</p>
<aclass="btn btn-pink btn-rounded waves-light"mdbRippleRadius>Read more</a>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-lg-4 col-md-6 mb-r">
<!--Featured image-->
<divclass="view overlay hm-white-slight mb-2 waves-light"mdbRippleRadius>
<imgsrc="https://mdbootstrap.com/img/Photos/Others/img%20(33).jpg"alt="Second sample image">
<a>
<divclass="mask"></div>
</a>
</div>
<!--Excerpt-->
<ahref=""class="deep-orange-text"><h6class="mb-3 mt-3"><iclass="fa fa-graduation-cap"></i><strong> Education</strong></h6></a>
<h4class="mb-3">This is title of the news</h4>
<p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
<aclass="btn btn-deep-orange btn-rounded waves-light"mdbRippleRadius>Read more</a>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-lg-4 col-md-6 mb-r">
<!--Featured image-->
<divclass="view overlay hm-white-slight mb-2 waves-light"mdbRippleRadius>
<a>
<divclass="mask"></div>
</a>
</div>
<!--Excerpt-->
<ahref=""class="cyan-text"><h6class="mb-3 mt-3"><iclass="fa fa-fire "></i><strong> Culture</strong></h6></a>
<h4class="mb-3">This is title of the news</h4>
<p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p>
<aclass="btn btn-info btn-rounded waves-light"mdbRippleRadius>Read more</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Blog v.2-->
<!--Footer-->
<footer class="page-footer bg-dark center-on-small-only">
<!--Section: Features v.2-->
<section class="section feature-box">
<divclass="row features-small">
<!--Grid column-->
<divclass="col-md-4 mb-r">
<divclass="col-1 col-md-2 float-left">
<iclass="fa fa-heartbeat white-text"></i>
</div>
<divclass="col-10 col-md-9 col-lg-10 float-right">
<h4class="feature-title">300+ Strong Team</h4>
<pclass="white-text">300+ in-house team members with a network of over 6000+ Professionals.</p>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-md-4 mb-r">
<divclass="col-1 col-md-2 float-left">
<iclass="fa fa-shield white-text"></i>
</div>
<divclass="col-10 col-md-9 col-lg-10 float-right">
<h4class="feature-title">24/7 Support</h4>
<pclass="white-text">Get support through phone, email, mobile app or live chat - 24/7, 365 days.</p>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<divclass="col-md-4 mb-r">
<divclass="col-1 col-md-2 float-left">
<iclass="fa fa-credit-card white-text"></i>
</div>
<divclass="col-10 col-md-9 col-lg-10 float-right">
<h4class="feature-title">EMI Payment</h4>
<pclass="white-text">Easily pay online with EMI payments, credit or debit card, net banking, PayPal and more.</p>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Features v.2-->
<hr>
<!--Social buttons-->
<divclass="text-center mb-3">
<aclass="btn-floating btn-small btn-fb waves-light"mdbRippleRadius><iclass="fa fa-facebook"></i></a>
<aclass="btn-floating btn-small btn-tw waves-light"mdbRippleRadius><iclass="fa fa-twitter"></i></a>
<aclass="btn-floating btn-small btn-gplus waves-light"mdbRippleRadius><iclass="fa fa-google-plus"></i></a>
<aclass="btn-floating btn-small btn-li waves-light"mdbRippleRadius><iclass="fa fa-linkedin"></i></a>
</div>
<!--/.Social buttons-->
<!--Copyright-->
<divclass="footer-copyright">
<divclass="container-fluid">
© 2018 Copyright: <a href="https://www.virtualauditor.in"> Virtual Auditor Private Limited </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!--/.Footer-->

Damian Gemza staff commented 7 years ago

Dear rockrude, Please paste me this code using formatting. I'm unable to use it now. Best Regards, Damian
Write
Create snippet
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: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
rockrude
Pro User
32Support score
8Questions 3Answers
0Snippets likes 0Snippets