Dropdown works in HTML but not with the server

Bootstrap Studio Help
1

Hey everyone! I have created a Webdesign with BSS v4.6.0 that is currently running on a Flask server and the templating is being done through Jinja2. Everything is fine besides the dropdown menu. When I preview the HTML in BSS or even open the HTML itself, everything works great and I’m able to expand the dropdowns.

However, when I run my Flask server and open the website through the localhost, the dropdown won’t expand at all.

I have checked dev tools(f12) for any errors, and nothings shows up.

I’m using Jquery v3.5.1 and BSS v4.6.0.

Here is the HTML code:

Capture
Capture1720×881 83.7 KB

Thank you.

2

Hy,
did you try to check with the browser’s debug tool (Firefox with CTRL-SHIFT-K) if there is no error on loading one or more of the assets?
Best

3

Hey,
Yes I have checked on either Firefox and Chrome and the console is empty, no errors appear.

4

Can you post the code as text, so I can test it on my server?

5 
<!DOCTYPE html>

<html id="Homepage" lang="pt">

<head>

{% block head %}

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <title>{% block title %}Website{% endblock %}</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="assets/css/styles.css">

    <link rel="stylesheet" href="assets/css/FAQ.css">

    <link rel="stylesheet" href="assets/css/Pretty-Footer.css">

{% endblock %}

</head>

<body>

    <header id="NavigationBar">

        {% block NavigationBar %}

        <nav class="navbar navbar-light navbar-expand-md d-xl-flex NavBar">

            <div class="container-fluid"><a class="navbar-brand NavBarLogo" href="#"><img class="Logo" src="Image1.svg"></a><button class="navbar-toggler" data-toggle="collapse" id="Smaller-Screens-Menu-Toggle"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>

                <ul class="navbar-nav d-xl-flex align-items-center RightNavSpace RightNavStyle">

                    <li class="nav-item RightNavSpace">

                        <div class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-toggle="dropdown" href="#">Categories</a>

                            <div class="dropdown-menu"><a class="dropdown-item" href="#">Category 1</a><a class="dropdown-item" href="#">Category 2</a><a class="dropdown-item" href="#">Category 3</a></div>

                        </div>

                    </li>

                    <li class="nav-item RightNavSpace"><label class="d-xl-flex navdivider"></label></li>

                    <li class="nav-item RightNavSpace"><a class="nav-link RightNavLink" href="#">Stuff</a></li>

                    <li class="nav-item RightNavSpace"><label class="d-xl-flex navdivider"></label></li>

                    <li class="nav-item RightNavSpace"><a class="nav-link" href="#">Stuff 2</a></li>

                    <li class="nav-item RightNavSpace"><label class="d-xl-flex navdivider"></label></li>

                    {% if is_logged_in %}

                    <div class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-toggle="dropdown" href="#">My Account</a>

                        <div class="dropdown-menu"><a class="dropdown-item" href="#">Account Details</a><a class="dropdown-item" href="#">Favourites</a><a class="dropdown-item" href="#" action="/logout" method="post">Logout</a></div>

                    {% else %}

                    <li class="nav-item"><a class="nav-link d-xl-flex align-items-xl-center" href="#">&nbsp; Login</a></li>

                    {% endif %}

                </ul>

            </div>

        </nav>

        {% endblock %}

    </header>

{% block content %}{% endblock %}

{% block Scripts %}

<script src="assets/js/jquery.min.js"></script>

<script src="assets/bootstrap/js/bootstrap.min.js"></script>

<script src="assets/js/FAQ.js"></script>

<script src="assets/js/Choose_Tickets.js"></script>

<script src="assets/js/PassConfirmValid.js"></script>

{% endblock %}

</body>

</html>
6

Hey carliedue!

Just to let you know that I managed to fix the issue. Turns out my code was not performing the template inheritance on the scripts, so basically this HTML wasn’t returning any scripts whatsoever.

A quick fix is just to place the scripts inside the {% block BottomFooter %}

Thanks for the help tho.

Best Regards

7

Glad I tried to help.
Best