Topic: modal issues with navbar

demzl25 priority asked 3 years ago


I have issue with modal after i close it and navbar become to wide. I'm sending you video that shows this issue: And image:

Link to the website:

I'm sending also code snippet:


Marcin Luczak staff answered 3 years ago


I've checked your webpage and snippets and it seems that there is some issue with your opening and closing tags, because as you can see in my snippet your modal and navbar work fine when they are only components on the webpage:

At line 727 from your snippet, there is an additional closing main tag that doesn't have an opening tag, which seems to be corrupting some parts of your code.

Also removing paragraphs between 230 and 252 lines seems to be fixing this modal/navbar issue.

Please check your HTML and make sure everything is opened and closed right.

Best regards, Marcin

demzl25 priority commented 3 years ago


Thank you!

Now i have fixed HTML and still I have the same issue. I'm not sure what is wrong!

I have created new code snippet of the HTML code:

Best regards, Damjan

Marcin Luczak staff commented 3 years ago


Unfortunately, I can't find what is a problem inside your code. Using the clean composition of MDB modal, navbar, and header I can't reproduce your issue so it must be something inside the rest of your code. Maybe you still have some not closed tags or styles that cause your problems. Please check if everything is ok inside your code. To not leave you without any help I've created a snippet that will 'hot-fix' your navbar width issue. Inside your <script></script> tag please add following: $("#darkModalForm").on('', function(){ $("#darkModalForm").css("padding-right", "0"); $("body").css("padding-right", "0"); $(".navbar").css("margin-right", "0"); });

This should prevent your navbar from widening when the modal is open.

I hope that this will work for now, Best regards, Marcin

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: desktop
  • Browser: chrome
  • OS: win10
  • Provided sample code: No
  • Provided link: Yes