What could be causing my navbar to not be responsive on mobile devices?

I'm in need of assistance. When viewing my website in mobile mode, the collapse hamburger menu is hiding too far to the right. This issue is making the site look unresponsive, and I've been unable to find a solution. It seems like the problem started when I added the footer, so I will provide the full code including the footer. View the full code on GitHub

    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f140b">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c1cfd32feeb9eca9cecbfb0417cfc0cdd03302">[email protected]</a>/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/line-icons.css">
    <link rel="stylesheet" href="./css/style.css" />

  </head>
  <body data-bs-spy="scroll" data-bs-target=".navbar">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top"data-aos="fade-down">
      <div class="container">
        <img class="navbar-brand" src="./images/logo.png" alt="" width="120" height="80" />
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto px-2">
          <li>
            <a class="nav-link active" href="#Home">Home</a>
          </li>
          <li>
            <a class="nav-link" href="#About-Me">About Me</a>
          </li>
          <li>
            <a class="nav-link" href="#Whats-new">Upcoming</a>
          </li>
          <li>
            <a class="nav-link" href="">Manga</a>
          </li>
          <li>
            <a class="nav-link" href="">Anime</a>
          </li>
          <li>
            <a class="nav-link" href="">Movies</a>
          </li>
          <li>
            <a class="nav-link" href="">TV Shows</a>
          </li>
          <li>
            <a class="nav-link" href="">Novels</a>
          </li>
          <li>
            <a class="nav-link" href="#Contact">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>

    <footer class="py-4">
      <div class="container">
        <div class="row ">
          <div class="col-md-6">
            <p class="mb-0">Copyright © 2020-2022. Designed by Akash Pandya</p>
          </div>
          <div class="col-md-6 icons">
            <a href=""><img src="./images/instagram-logo-24.png" alt=""></a>
            <a href=""><img src="./images/twitter-logo-24.png" alt=""></a>
            <a href=""><img src="./images/facebook-circle-logo-24.png" alt=""></a>
            <a href=""><img src="./images/linkedin-square-logo-24.png" alt=""></a>
htmlcssgridbootstrap-5

Answer №2

In the index.html file, there are issues with the "About" section and the "Get in Touch" section when using 

data-aos="zoom-out-left"
and 
data-aos="zoom-out-right"
.

About section:

If you encounter problems, consider trying the following code:

<section id="About-Me" style="width:100%;overflow:hidden;">
 .........
 .......
</section>

Contact section:

If you face similar difficulties, attempt the following code:

<section id="Contact" class="bg-cover contact-us" style="width:100%;overflow:hidden;">
   ...........
   ...........
</section>

For reference, below is an excerpt from the index file:

Answer №3

Make sure to double-check if jQuery and Popper.js are loaded before Bootstrap.min.js is called.

You can use the following code:

<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The radio button becomes unchecked when moving to the next fieldset

While developing a dynamic page using PHP and Laravel, I encountered a situation where I needed to add an additional radio button option to each card. Below is the code snippet for the card in question: <div class="card" style="margin:10p ...

htmlformstwitter-bootstrapdom

Steps for implementing a Material-UI transition effect with hover using pseudo classes

My useStyles hook code is meant to create a full-page background that changes on hover, but for some reason it isn't working. I came across a similar solution in CSS which works perfectly. Can you help me figure out the issue? Code snippet that' ...

cssreactjsmaterial-ui

When my viewport's size is less than 998px, a blank space appears

While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without an ...

htmlcsswhitespaceviewport

How to pass arguments to a function within a preg_replace in PHP

Greetings! I currently have a situation similar to this: $content = preg_replace('#(\s*)\<pre(.*?)\>(.*?)\</pre\>(\s*)#sie', 'dostuff(\'\\3\', \'\\2 ...

phphtmlregexstring

Increase the distance between input boxes using CSS styling

I'm encountering an issue with adding spacing between input boxes, despite attempting to use padding. The padding only seems to move the boxes instead of creating space between them. Here is my code: ...

htmlcss

Stacking pictures with CSS and absolute placement

I have designed a webpage where I need to layer three images in a specific order to create a background for content placement without any movement during scrolling. Fixed positioning is not suitable for this purpose. Below is the sequence in which the imag ...

htmlcsscss-position

Troubleshooting Floating Divs in ExtJs TreePanel Component

I am currently utilizing the treepanel object in ExtJs and I am trying to implement two divs side by side within the treepanel items. Is it feasible to have one of them set with a fluid width and the other with an auto width? Despite my HTML and CSS codes ...

htmlcssextjs

PhP submit triggers fatal error

I am currently developing a form to add records to a database directly from the browser. However, upon submitting the form, I encountered the following error: Fatal error: Call to a member function execute() on boolean in /srv/http/career.php on line 56 ...

phphtmlmysql

Tips on creating a responsive div element within the viewport?

I have a variety of nested div elements within a parent div, set up like this: #mycontent > div { width: 14.28%; } <div id="myheader">some header content</div> <div class="container" id="mycontent"> <div class="outerdiv" id= ...

htmlcss

What is the best way to choose a date and time in a custom format within my React application?

I'm currently developing the front-end of my application using React. I am looking for a way to capture the date and time in the specific format shown in this image. Any suggestions or solutions would be greatly appreciated! ...

javascripthtmljqueryreactjsfrontend

Android not showing scroll bar in ion-scroll feature

I am experiencing an issue where a div with a fixed height displays a scroll bar on browsers but not on an Android phone. <ion-scroll style="height:300px;" scrollbar-y='true'> //content </ion-scroll> ...

cssangularjsionic-framework

Adjusting the color of an HTML slider button as it moves

In my setup, I have a straightforward slider that I plan to use for controlling the movement of a stepper motor based on the slider's position. I wanted to give the website where this will be hosted a professional look, so I've spent quite some t ...

javascripthtmlcss

What is the process for inserting a hyperlink onto an image within a query slider?

I am experiencing difficulties when attempting to add hyperlinks to the images in my slider. I have come to understand that images cannot be clickable in jQuery sliders, so I have tried the following in the HTML: <div class="wrapper"> <div class= ...

jqueryhtmlcss

Bootstrap 5's h-100 feature functions flawlessly in Chrome, however, it encounters issues when used with a group

Can you please refer to this question: Issue with Aspect Ratio of Images in Bootstrap 5 due to Padding After applying the h-100 solution, everything looks great on Chrome. Unfortunately, when I check it in Safari, the aspect ratio of the image gets distor ...

cssgoogle-chromesafaribootstrap-5

Tips for using unique fonts in email text display

As I was editing a Mailer template in core php, I found myself wanting to set a custom font for the text displayed in the mail template similar to how we do it for websites using CSS and imported fonts. Below is the code snippet that I have been using: & ...

cssuser-interfacefontsgmailmailer

Numerous sections of content

Struggling to align these two pieces of content side by side. While I've had success displaying content like this in the past, I'm hitting a roadblock this time around. Any assistance would be greatly appreciated. HTML <div class="block-one" ...

htmlcss

How can I apply a unique CSS class to specific rows within an h:dataTable?

I am looking to apply unique CSS classes to certain rows within my <h:dataTable>. Is it possible to manipulate and style the individual table rows in a customized manner? ...

cssjsfdatatable

Ways to reveal concealed div elements when hovering the mouse?

Is there a way to display a group of hidden div's when hovering over them? For instance: <div id="div1">Div 1 Content</div> <div id="div2">Div 2 Content</div> <div id="div3">Div 3 Content</div> All div's sho ...

javascriptjqueryhtmlcssmouseover

Switching the class from "untoggled" items to the selected item in React

Recently, I developed a toggle component known as Accordion. Within this component, I am iterating through an array of objects and displaying them in the following format: {object.map((o) => ( <Accordion key={o.id} title={o.question} className="i ...

cssreactjsreact-hookstoggleaccordion

having each individual div function on its own accord

Is there a more efficient way to make HTML and CSS function independently without duplicating the code multiple times and changing IDs or class names? Currently, only the top male and female button works when clicked. I am looking for a CSS-only solution t ...

htmlcss