Bootstrap navigation menu opens normally but refuses to close

Question

I am making a counter-part of an original HTML file in NuxtJS, I have the following code in the Navbar component for my NuxtJS project

<template>
  <section id="navigation-menu" class="menu menu3 cid-sLhoPz7Ycg" once="menu">
    <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
      <div class="container">
        <div class="navbar-brand">
          <span class="navbar-logo">
            <a href="/">
              <img src="~/assets/images/bitflow.png" alt="Bitflow" style="height: 3rem;">
            </a>
          </span>
          <span class="navbar-caption-wrap"><a class="navbar-caption text-black text-primary display-7" href="/">Bitflow</a></span>
        </div>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <div class="hamburger">
            <span />
            <span />
            <span />
            <span />
          </div>
        </button>
        <div id="navbarSupportedContent" class="collapse navbar-collapse">
          <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true">
            <li class="nav-item">
              <a class="nav-link link text-black text-primary display-4" href="/#switch-header-1"><span class="ti-pencil-alt mbr-iconfont mbr-iconfont-btn" />Mission</a>
            </li>
            <li class="nav-item">
              <a class="nav-link link text-black text-primary display-4" href="/works"><span class="ti-layout-tab mbr-iconfont mbr-iconfont-btn" />Works</a>
            </li>
            <li class="nav-item">
              <a class="nav-link link text-black text-primary display-4" href="/#our-team"><span class="ti-headphone-alt mbr-iconfont mbr-iconfont-btn" />Team</a>
            </li>
          </ul>
          <div class="icons-menu">
            <a class="iconfont-wrapper" href="https://github.com" target="_blank" title="Save this template !">
              <span class="p-2 mbr-iconfont ti-import" />
            </a>
            <a class="iconfont-wrapper" href="#" title="Toggle dark mode">
              <span class="p-2 mbr-iconfont ti-shine" />
            </a>
          </div>
        </div>
      </div>
    </nav>
  </section>
</template>

This is the useful chunk in the nuxt.config.js file

css: [
    '@/assets/css/fontawesome.min.css',
    '@/assets/font-awesome-brands/css/brands.min.css',
    '@/assets/themify/css/themify-icons.css',
    '@/assets/tether/tether.min.css',
    '@/assets/bootstrap/css/bootstrap.min.css',
    '@/assets/bootstrap/css/bootstrap-grid.min.css',
    '@/assets/bootstrap/css/bootstrap-reboot.min.css',
    '@/assets/animatecss/animate.css',
    '@/assets/dropdown/css/style.css',
    '@/assets/formstyler/jquery.formstyler.css',
    '@/assets/formstyler/jquery.formstyler.theme.css',
    '@/assets/socicon/css/styles.css',
    '@/assets/theme/css/style.css',
    '@/assets/mobirise/css/mbr-additional.css',
    '@/assets/web/assets/mobirise-icons2/mobirise2.css'
  ],

And finally the links to the javascript files in the index.vue file

<script src="js/web/assets/jquery/jquery.min.js" />
<script src="js/popper/popper.min.js" />
<script src="js/tether/tether.min.js" />
<script src="js/bootstrap/js/bootstrap.min.js" />
<script src="js/smoothscroll/smooth-scroll.js" />
<script src="js/viewportchecker/jquery.viewportchecker.js" />
<script src="js/dropdown/js/nav-dropdown.js" />
<script src="js/dropdown/js/navbar-dropdown.js" />
<script src="js/touchswipe/jquery.touch-swipe.min.js" />
<script src="js/parallax/jarallax.min.js" />
<script src="js/formstyler/jquery.formstyler.js" />
<script src="js/formstyler/jquery.formstyler.min.js" />
<script src="js/theme/js/script.js" />

I have run out of ideas on how to solve this issue. The original HTML file works normally when I open them in the browser. I will appreciate all suggestions offered

kissu · Accepted Answer · 2021-11-20T22:11:58.507

1

Several things here:

working with an HTML file and a Nuxt app is not really the same in the way that you do have a build process with Nuxt/Vue, so you cannot really link the CSS/JS in the same way
you probably don't need to import jQuery and a lot of stuff here, because Vue is more powerful that jQuery and less heavy too. If you really want it, here is how to.
do not import global CSS nor inline scripts, use regular CSS imports in your SFC files (when needed) and use NPM to import the packages
the easiest and proper way to work with Bootstrap in a Nuxt app is explained here
please show us that you did a good amount of research next time, most of the answers can already be found with a search, I've explained those here because it's a bit hard to understand where to aim at first because you're new and because you did the effort of showing us your code properly

edited Nov 20 '21 at 22:11

answered Nov 20 '21 at 22:04

kissu

40,416
14
65
133

Thanks for the advice. Adding jQuery the proper way made the navigation menu to work – Oyedeji Oyewole Nov 21 '21 at 14:07
@OyedejiOyewole still, try to ditch jQuery here, we're in 2021. – kissu Nov 21 '21 at 14:09
It may be a problem the site was made with mobirise – Oyedeji Oyewole Dec 06 '21 at 12:02
I recently started using vuejs and nuxtjs – Oyedeji Oyewole Dec 06 '21 at 12:03
@OyedejiOyewole looks like Mobirise and Nuxt have nothing to do in common. – kissu Dec 06 '21 at 12:34
Looks like a have to host the local HTML file instead then – Oyedeji Oyewole Dec 06 '21 at 20:25
@OyedejiOyewole what do you mean? What is the HTML file? – kissu Dec 07 '21 at 00:31
The local HTML file gotten from exporting a Mobirise site. I am just gonna push that one to GitHub and then link it to Vercel – Oyedeji Oyewole Dec 07 '21 at 10:03
1

Thanks for your help on the project. The client was so happy about the design. The client will pay for domain and CNAME differently. This is the site live -> https://bitflow.vercel.app – Oyedeji Oyewole Dec 07 '21 at 13:43
@OyedejiOyewole looking slick! – kissu Dec 07 '21 at 13:55
@OyedejiOyewole damn amazing work i like the simplicity about it – Cosmas Ochieng May 24 '22 at 13:39

Bootstrap navigation menu opens normally but refuses to close

1 Answers1