Login

ronniebel · 08-15-2019, 11:59 AM

My Navbar is not working on mobile.

spokaneesl.com

Any ideas what's going on?

Code:
<html>

<head>

  <title>Spokane Regional ESL Conference</title>

  <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">

</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">

    <a class="navbar-brand" href="#"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">

      <ul class="navbar-nav">

        <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="https://spokaneesl.com/about">About</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="https://spokaneesl.com/committee">Committee</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="https://spokaneesl.com/schedule">Schedule</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="https://spokaneesl.com/presentations">2019 Presentations</a>

        </li>

      </ul>

    </div>

  </nav>

  <hr style="height:30px">

  <center><a href="home"><img src="https://cl.ly/ae16eb233fa4/bright_esl_d.png"></a></center>

  <div class="container">

    <p><hr style="height:30px">

dave friend · 08-15-2019, 12:16 PM

I'm not seeing any javascript being loaded. I think you need a bit of that to detect clicks - right?

Something in your css is whack too - the nav bar does not size correctly.

**InsiteFX** · 08-15-2019, 03:12 PM

he does need to load jquery and the bootstrap js files you are right dave friend.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009. ( Skype: insitfx )

ronniebel · 08-15-2019, 05:03 PM

How to I load jquery and the bootstrap js files?

dave friend · 08-15-2019, 05:55 PM

(08-15-2019, 05:03 PM)ronniebel Wrote: How to I load jquery and the bootstrap js files?

In the <head> section of your HTML add the following.

Code:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js></script>

website · 08-16-2019, 06:06 AM

and You have a lot of errors:
https://validator.w3.org/nu/?doc=https%3...esl.com%2F

https://website.info.pl

ronniebel · 08-16-2019, 10:04 AM

(08-16-2019, 06:06 AM)website Wrote: and You have a lot of errors:
https://validator.w3.org/nu/?doc=https%3...esl.com%2F

Thanks for the info. Are those errors in my header.php file which is my template for the site? As a newbie to all of this, I don't know where to begin to fix these errors.

website · 08-17-2019, 02:31 PM

Those errors is basic html and css, you should learn this.

https://website.info.pl