Struggling to get nav link drop down to be active

Wappler General How To
1

hi
not sure this is wappler per se or me or what.

i have been trying to setup a template

https://eco-storage.es/storage/client-list.php

that particular link should open up the "Clients" dropdown and have that drop down and "View all" active, but it doesnt.

This is from this theme:

https://bootstrapmade.com/demo/NiceAdmin/

its bs 5.3, its same jquery version etc.

I have sat now for prob 2 days trying to study to see why it doesnt work. I have at the moment this as one page, all includes into the page so not includes, i have tried using the theme original main.js and style.css file, but it never works, yet, the theme works great on its own (ie downloaded, unpacked and opened), their nav remains open, active css class on the dropdown and child. But i cannot get it to work in wappler, i get no errors, but it must be maybe the NiceAdmin Bootstrap Template Demo or something conflicting

sorry to ask on here, but would love to get this working to move the wappler project forward, its a nice clean theme thats not overloaded with tonnes of js etc, so the theme might appeal to others as well.

you might get the odd error as i removed the security on the page but it will fail trying to run the Sc, but that doesnt affect the nav links.

just cannot for the life of me work out why it wont work, side by side the theme and my aside code are the same

thanks in advance

2

well that's some custom code, not really using a standard bootstrap nav/navbar structure:

<ul class="search-results-dropdown dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <li class="dropdown-header">
                    <div class="d-flex">
                        <div class="flex-fill">
                            <span is="dmx-if" dmx-bind:condition="!SC_ClientSearchFilter.data.query.isEmpty()">{{SC_ClientSearchFilter.data.query.count()}} clients found</span>
                            <span is="dmx-if" dmx-bind:condition="SC_ClientSearchFilter.data.query.isEmpty()">
                                Enter client name to search</span>

                        </div>

                        <div class="justify-content-end">
                            <a href="/storage/client-list.php" class="badge rounded-pill bg-primary p-2 ms-2 text-decoration-none">View all</a>
                        </div>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" value="1" id="filteractive" name="filterActive" dmx-on:click="filteractive.setValue(1)">
                        <label class="form-check-label label-checkbox" for="filteractive">View inactive</label>
                    </div>
                </li>
...
</ul>

This has nothing to do with the standard Bootstrap 5 code for navs or navbar. The script marking a link as active expects standard Bootstrap 5 navigation code.

If you are willing to use such a custom structure, you'd better look into setting the .active class (or whatever class your template uses) using dynamic attributes by checking if the current url matches your link href.

BTW using such custom templates if you are not really experienced developer or not familiar with Bootstrap 5, can cause more troubles than just building the layout by your own.

2 Likes
3

yeah, its pretty custom, although they sell its as bs5.3, and it does seem to be bs5.3, but its not standard navbar, i have the top bar working lovely, just cant figure out how they are setting the sidenav active, the classes are in the style but the only js file they use beyonf the bs js files is main.js and I am using the same file as they are, theres works lovely in the browser but not mine, so guess its the wappler bs js file or something being different (even though taking a look at file sizes of theirs and the wappler one they are the same.

oh well, maybe keep my top nav and try to build a new sidebar inplace of the sidebar they have, i did try to build before getting this one, but never quite find the right tutorials or resources etc, this one works lovely in terms of being responsive and nice toggle action etc. but guess if cant get it to work i have no choice but to try to rebuild the part i cant get working.