MDB 4.4.1 Navbar Collapse toggle not showing correctly in ol

Topic: MDB 4.4.1 Navbar Collapse toggle not showing correctly in old browser

benlo335 free asked 7 years ago

Current MDB version: 4.4.1

Some old browser such as android 4.4.4 native browser, iphone 5 ios 6, ipad air ios 8.3 can't show navbar collapse toggle to right correctly. Even in your template https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/intro-fixed-transparent.html

Here is how it looks like in old browser: As you can see it goes to left

Can you explain why it is not showing correctly? Because the browser doesn't support specific css feature? Any alternative way to let toggle move to right? It is the problem of bootstrap or MDB?

Add comment

benlo335 free answered 7 years ago

2 0 Best answer

I got the solution, just add button.navbar-toggler{ float: right; } and the toggle will move to right correctly

Marta Wierzbicka staff commented 7 years ago

Ok, great.

Add comment

Inganji TV free answered 5 years ago

0 0 Best answer

I have the same problem , toggle is not working

Marta Wierzbicka staff commented 5 years ago

Hi,

if you have a problem with this in jQuery package (not in Angular), please create a snippet showing the problem here: https://mdbootstrap.com/snippets/ or paste here a link to your website to allow me to check the issue and try to fix this.

Best, Marta

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, if the problem is in the Angular version of MDB, please ask your question in the correct category on our forum - MDB Angular. Best, Marta

Add comment

alvics free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi there, Can anyone please explain why the (button.navbar-toggler) is not displaying when in mobile mode? The only thing I've changed in your navbar code is I deleted the color " navbar-dark black" form <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark black" [containerInside]="true"> So when in mobile mode no display but the element is there and the function of the button works but just you can't see it? I've tied changing the color with css !important but it does nothing? and when I change the element back to "navbar-dark black" it displays fine in mobile mode? I'm wanting a white navbar I'm using Angular 6 in my project, is there something I'm missing? Should be able to change the the color of an icon??? easily??. thanks Al

button.navbar-toggler{

color: #232323 !important;

}

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Hi, Unfortunately, I can't check this on my iPhone, iPad devices, because I've got the newest iOS but for checking if it is Bootstrap issue you can see how behaves a navbar in their documentation on your device with an old browser: https://getbootstrap.com/docs/4.0/components/navbar/#toggler. Best, Marta

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

benlo335

19Support score
1Questions 1Answers 0Snippets