Topic: Angular, navbar dropdown menu clipping in iPhone 6S+
On the mdb-navbar, I have a drop down menu with sub items, and the dropdown menu gets clipped, not visible on the next section below the navbar just on iPhone 6S on the device itself and using Firefox in Responsive mode iPhone 6S+
I messed around with CSS but haven't isolated which element is the culprit and how to fix it. So if you set the browser to responsive testing, select iPhone 6S+ and click the software menu or the cog icon.My website issue exampleAny help would be appreciated!
I am interested in going with the Pro version, I just need to make sure I can get all the elements important to me to work first.
Stumbled upon it by accident and fixed it. But I think it might be an error in your scss filenavbar2.scss or something
@media (max-width: 768px) {
.navbar {
&.fixed-top .navbar-collapse, &.sticky-top .navbar-collapse {
overflow-x: unset;
overflow-y: unset;
}
}
.dropdown-menu-right {
padding-left: 6px;
}
}
I found the element that needed change and added some extra SCSS to override the original SCSS. I had to turn the Overflow off to get the dropdown to extend beyond the navbar.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.4
- Device: iPhone 6S+
- Browser: Firefox IOS, Chrome IOS
- OS: IOS
- Provided sample code: No
- Provided link: Yes
Damian Gemza staff commented 5 years ago
Dear @Jim Kirker
I don't know what's wrong there, on your website. Could you please provide me with some screenshots/screen capture movie on which I'll be able to see, what's wrong?
Best Regards,
Damian
Jim Kirker commented 5 years ago
I fixed it already and posted the new revision of the website. Look at the post above again. Took me hours to figure it out. But thanks for responding!