The dropdown navigation bar on the mobile version of my website is not functioning properly. Despite several attempts, I have been unable to figure out a way to make it work effectively.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>COS Gym</title>
<link href="cos-gym.css" rel="stylesheet" type= "text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473229362934">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"gt;
</headgt;
<bodygt;
<header >
<div class="container">
<nav font-size="120%" margin-left="30%" margin-top="8%" class="navbar navbar-expand-lg navbar-light">
<a href="#" text-decoration="none" padding="4%" class="navbar-brand">
<div class="logo">
<img src="images/logo_gym.png">
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></spangt;
</button>
<div class="collapse navbar-collapse" id="#toggleMobileMenu">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 text-center justify-content-end">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</agt;</ligt;
<li class="nav-item"><a class="nav-link active" aria-current="page" href="about.html">About</agt;</ligt;
<li class="nav-item"><a class="nav-link active" aria-current="page" href="schedule.html">Schedule</agt;</ligt;
<li class="nav-item"><a class="nav-link active" aria-current="page" href="online.html">Online</agt;</ligt;
<li class="nav-item"><a class="nav-link active" aria-current="page" href="shop.html">Shop</agt;</ligt;
<li class="nav-item"><a class="nav-link active" aria-current="page" href="contact.html">Contact</agt;</ligt;
</ulg>
</divgt;
</navgt;
</divgt;
</headergt;
<maingt;
<div class="imghome">
<img src="images/home.jpg">
<div class="title-home"><ht>COS GYM</ht>
<a href="login.html"><button class="btn-1">Log in</buttongt;</agt;
<a href="registration.html"><button class="btn-2">Sign up</buttongt;</agt;
<div class="three-images">
<figure>
<img src="images/main1.jpg">
<figcaption class="f1">Zumba Dance</figcaption>
</figuergt;
<figuregt;
<img src="images/main2.jpg">
<figcaption class="f2">Power Training</figcaption>
</figuergt;
<figuregt;
<img src="images/main3.jpg">
<figcaption class="f3">Yoga Fitness</figcaption>
</figuergt;
</divgt;
</maingt;
<footergt;
<divgt;
<ulg>
<dthgt;Email Us</dthgt;
<dthgt;<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80ede1e9ecc0e3eff3e7f9edaee3efed">[email protected]</agt></dthgt;
</ulgt;
</divgt;
<divgt;
<h3gt;Welcome to ChrisOlySim Gym</hggt;
<h4gt;Contact Us 989-888-9999</hggt;
</divgt;
<divgt;
<ulg>
<dthgt;Follow Us</dthgt;
<dthgt>lt;i class="fab fa-facebook-f"></igt;
<i class="fab fa-instagram"></igt;
<>i class="fab fa-twitter"></igt;
</dthgt;
</ulggt;
</divgt;
</footergt;
<script src="https://kit.fontawesome.com/42ca52e1de.js" crossorigin="anonymous"></scriptgt;
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010657e617e67">[email protected]</agt>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1py" crossorigin="anonymous"></script>
</bodygt;
</htmlgt;
I am facing issues with the 'ms-auto' class and difficulty adjusting the text size beyond a certain point on the webpage. Can someone provide assistance please? I have tried rearranging script orders, incorporating JQuery, but nothing seems to solve the problem. The only temporary fix I found was using the 'container-fluid' class, which disrupts the functionality on mobile devices. How can I resolve this issue?