Menu nav dropdown not working properly on phone + not workin

Topic: Menu nav dropdown not working properly on phone + not working as shown on the Page

Alex GuaMi pro asked 6 years ago

The dropdown is diferent from what you promise. Same code. Copy pasted See differences: What you adivse: https://imgur.com/b65ykGX What you really get: https://imgur.com/A5UJq3u Also when using phone layout it getsbugged: https://imgur.com/a/NsPYP From the moment I installed the Pack got errors and warnings. Posted here without any answer. I can't even do a proper nav without problems *sigh*.

Oscar Bejarano pro commented 6 years ago

this problem happens in jquery version too

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hello guys,

This dropdown behavior what did  you saw in our documentation  is proper. Dropdown content should be placed right below navbar. But if you want to achieve this situation which you saw in our documentation, it's super easy to make it.

In element
<div>
<pre><div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu"></pre>
Which is contained in element
<div>
<div>
<pre><li class="nav-item dropdown" dropdown></pre>
</div>
</div>
</div>
<div></div>
<div>You have to add line: style="margin-top: -10px"</div>
<div>In example line:</div>
<div>
<pre><div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu"></pre>
</div>
<div>should looks like:</div>
<div>
<pre><div style="margin-top: -10px" *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu"></pre>
I'm unable to repeat bug on phones  that dropdown is below navbar. If you want to solve it,  you have to add some css styles like: margin-top: -10px and margin-left: 'some-pixels' only for small devices (@media all and...).
Best Regards,
Damian

</div>

Please insert min. 20 characters.

Hello guys, This dropdown behavior what did you saw in our documentation is proper. Dropdown content should be placed right below navbar. But if you want to achieve this situation which you saw in our documentation, it's super easy to make it. In element

<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">

Which is contained in element

<li class="nav-item dropdown" dropdown>

You have to add line: style="margin-top: -10px"

In example line:

<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">

should looks like:

<div style="margin-top: -10px" *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">

I'm unable to repeat bug on phones that dropdown is below navbar. If you want to solve it, you have to add some css styles like: margin-top: -10px and margin-left: 'some-pixels' only for small devices (@media all and...). Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Alex GuaMi

Pro User 14Support score
8Questions 1Answers 0Snippets