Pinegrow Community Support Forum

Bootstrap 4 dropdown not working

I am trying Bootstrap starter theme and just checking if dropdown is working or not and found that drop down is not working as expected.
please check the screenshot below -

see here page b showing # link instead of page B link.

What I am doing wrong ?

@Mayanktaker what were you expecting to see?

I am expecting the link of the page but instead of showing clickable link of the page, its showing # in link when hover.
like instead of showing site.com/page-2
its showing site.com/#

so its non clickable link(just #) instead of clickable.

This is utterly confusing. The first of the two links you posted above doesn’t even work.

Post your code or a live copy of the webpage. Images don’t explain anything.

I am testing on local computer and I just dragged the bootstrap nav bar to test page and then i set up wp smart menu.
and when I am testing it on site, it is showing all navigation links as expected but parent menu and its sub menus are not showing as expected. Instead of showing the link of parent page, its showing default # link.

Here is html code of default nav bar which im testing

<ul class="navbar-nav mr-auto mt-2 mt-lg-0" wp-nav-menu="primary" wp-nav-menu-theme-location="primary" wp-nav-menu-type="bootstrap4" wp-nav-menu-current-class="active" wp-nav-menu-depth="3"> 
    <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
    </li>     
    <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
    </li>     
    <li class="nav-item"> 
        <a class="nav-link disabled" href="#">Disabled</a> 
    </li>     
    <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink47" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                                    Dropdown link                                </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink47"> 
            <a class="dropdown-item" href="#">Action</a> 
            <a class="dropdown-item" href="#">Another action</a> 
            <a class="dropdown-item" href="#">Something else here</a> 
        </div>         
    </li>     
</ul>

Here is my wp smart action setting for menu –

Now check here when im hovering on Page b for click , it shows # instead of link of the Page B. check on corner.

Hello,

​You have to play with the DEPTH parameter so your menus should behave as you expect:



​Note: The wp-bootstrap-navwalker supports only 2 depth because this is standard and official method from the bootstrap framework

Regards.

Yes I tried with 1, 2 and 3 but results are same with all of them and depth 0 showing only parent menu(working link). I am doing something wrong. But I dont know where im doing wrong…

Tested this (again) a few seconds ago on a test theme created with PG (and BS4) and it works as expected: