Dropdown menu not recklickable

Hey, im new to bootstrap studio and editing websites in general. I have added a dropdown menu to a navbar but once im on a page from the dropdown menu i cant reclick it to choose another page

Thanks for the help (and sorry for my bad english) :)

Is your navigation menu a linked component? Because that's what you want. This way, any changes you make to it on one page are automatically made on all the other pages.

I have linked the navbar already but i still cant reclick the dropdown menu once im on a page from the dropdown... I published the website so you can see what i mean: https://fancy-lab-2723.bss.design/

The problem only occurs when you're on one of the pages in the dropdown. There seems to be a javascript conflict. I removed this line of from your code, and the menu worked correctly.

                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

Thanks for your help. It does work for me but is there any way i can fix the problem in BSS?

You can try changing the include order on your scripts. Go to the design tab (lower right) right-click Javascript and select "include order." What are you using popper.js for? Do you really need it?

I will try that, im Not really sure.. as i said im not really familiar with designing webpages / writing code.. thanks for your time and help!

Well ive only got one .js File inside there heres a Link to my .bss file https://www.dropbox.com/s/y8fao938fqaqvbc/wohnmobil_neu.bsdesign?dl=0

Unfortunately I can't open the file because I'm still on Bootstrap Studio 4.x and your file was created in 5.x. I can't upgrade my program right now so maybe someone else can have a look.

Looking at the code, you've got three scripts being loaded via CDN right after your carousel.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script></div>

Typically you do not want scripts loading in the middle of a page, so I'm not sure why they are there. Are you using any custom code on the page anywhere?

I would say try deleting components on the page one at a time, until you find what is using this particular js. The problem is only occurring on the three pages in your drop down menu. You also seem to be loading all your libraries through CDNs. You could try going into your export settings and disabling the switch "use a CDN for libraries." You just need to do a little detective work until you find what you added that's using popper.js.

Okay i'll try that tomorrow.the article component from bootstrap (those three Sites are the only ones using that component) might bei causing the problem.. Navbar and Footer should all be the same.

popper.js is used for tooltips in Bootstrap. Are you using any tooltips on the page anywhere? If so, try getting rid of them. If you're not using any custom code anywhere, this could be a bug you've found in the 5.x release. You might want to also post this in the bug reports forum, along with the link to your site and your .bsdesign file.

The problem is on the pages with the carousel, on those pages is jquery and bootstrap js files 2 times loaded. Here you can download your design without custom code wohnmobil_neu.bsdesign

Looks like its a moodle theme...?

https://github.com/moodle/moodle/blob/master/theme/boost/scss/bootstrap/_navbar.scss

So the solution was just to delete the code where those js files were loaded the 2nd time? How did you remove it from the custom code?

Thank you very much btw :)

Seems like this little bit of code is causing problems too as the dropdown disappears on mobile...

.collapse {
  &:not(.show) {
    display: none;
  }
}

I think the dropdown uses popper if I am not mistaken ? @Printninja

@Twinstream

Back when Bootstrap 4 was in beta, popper.js was part of the required scripts - yes, I believe for the dropdown.

The current release of Bootstrap uses bootstrap.bundle.min.js which contains popper.js

Looks like HijackerZz is loading both the old and new scripts on the page, so that's probably causing a conflict, which is why when I opened the site in Pinegrow and deleted the script in the middle of the page calling popper.js, the dropdown worked. Simply need to find out what is loading those scripts mid-way on the page and delete them.