Question 61354 in Twitter Bootstrap Question posted in

Why is my navbar not responsive on mobile?-Twitter bootstrap

Please help me. Looking at the mobile mode, my collapse hamburger menu always hides very far in the right. this makes the website look not responsive and I can’t figure out how to fix it. I think it worked till I added the footer so I will include it in the code.
https://github.com/akashpandya/akashpandya.github.io — full code

    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link href="https://unpkg.com/[email protected]/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>
Tags:

3

Answers


  1. 0

    please check weather jquery and popper are loaded before loading bootstrap.min.js.

    try with following

    <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>
    Login or Signup to reply.
  2. 0

    In index.html file about section and get in touch section
    data-aos="zoom-out-left" and data-aos="zoom-out-right" not work properly

    About section:

    you can try this

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

    And Contact section :

    you can try this

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

    index file

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap Try</title>
        <link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous"
        />
        <link href="https://unpkg.com/[email protected]/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-fluid">
            <img class="navbar-brand mx-5" 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-5">
              <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>
        <!-- Hero -->
        <section id="Home" class="bg-cover hero-section" >
          <div class="overlay"></div>
          <div class="container text-white text-center">
            <div class="row">
              <div class="col-12">
                <h1 class="display-4" data-aos="zoom-in">My Hub For All Things Content</h1>
                <p class="my-4" data-aos="fade-up">Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Harum error reiciendis sapiente vero numquam doloremque!</p>
                <a class="btn btn-main" data-aos="fade-up" href="">Click To Know More</a>
              </div>
            </div>
          </div>  
        </section>
        <!-- About Me -->
        <section id="About-Me" style="width:100%;overflow:hidden;">
          <div class="container">
            <div class="row">
              <div class="col-md-4 col-xs-12 section-intro" data-aos="fade-up">
                <h1>About Me</h1>
                <div class="divider"></div>
                <p data-aos="zoom-in">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi recusandae porro, est facere vel commodi itaque ratione veritatis corrupti quae atque quos, <br> totam quod perspiciatis numquam dolor deleniti! Excepturi, voluptatum!</p>
              </div>
              <div class="col-md-8 col-xs-12 intro-images">
                <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
                  <div class="carousel-inner" data-aos="zoom-out-left">
                    <div class="carousel-item active">
                      <img src="./images/img1.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="./images/img2.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="./images/img3.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="./images/img4.jpg" class="d-block w-100" alt="...">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- Offers -->
        <section id="About-Me" class="text-center about">
          <div class="container">
            <div class="row">
              <div class="col-12 section-about text-center" data-aos="fade-down">
                <h1>What is this website for?</h1>
                <div class="divider"></div>
                <p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum,  <br>  expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
    
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="accordion" id="accordionExample" data-aos="fade-up">
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                      <button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
                      </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                      <div class="accordion-body">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima veniam, earum nobis esse suscipit delectus in eum? Repellendus, doloremque quidem amet quos perferendis labore provident ea quas facilis, reiciendis quam vel nemo cupiditate soluta temporibus veritatis sequi delectus, laborum autem!
                      </div>
                    </div>
                  </div>
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
                      </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                      <div class="accordion-body">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis a officiis temporibus minima, qui nam odio magni dolor provident nulla illum sit, voluptatem quis cumque, sapiente impedit eligendi explicabo ullam ab iusto!
                      </div>
                    </div>
                  </div>
                  <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, natus?
                      </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                      <div class="accordion-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus incidunt laudantium nesciunt cupiditate, dolore mollitia officiis iste, eaque quibusdam doloremque dolorum assumenda. Est esse velit sit, blanditiis autem libero fugit recusandae eum explicabo sequi suscipit, aspernatur cumque exercitationem accusantium id. Necessitatibus!
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- Upcoming Video -->
        <section id="Whats-new" class="bg-cover upcoming-section" >
          <div class="overlay"></div>
          <div class="container text-white text-center">
            <div class="row g-4">
              <div class="col-12 section-current text-center" data-aos="zoom-in-right">
                <h1>Most Anticipated Content</h1>
                <div class="divider"></div>
                <p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum,  <br>  expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
                <a href="" class="video-btn"><img src="./images/play-regular-24.png" alt=""></a>
    
              </div>
            </div>
          </div>  
        </section>
        <!-- Current Watchlist -->
        <section id="current" class="text-center">
          <div class="container">
            <div class="row">
              <div class="col-12 section-current text-center" data-aos="zoom-in">
                <h1>Current Watch List</h1>
                <div class="divider"></div>
                <p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum,  <br>  expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
    
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="watchlist" >
                  <div class="watchlist-img" data-aos="flip-left">
                    <img src="./images/watch-list-img1.jpg" alt=""> 
                    <div class="icon"><i class="icon-tv"></i></div> 
                  </div>
                  <h5 class="mt-5">Arcane</h5>
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
                </div>
              </div>
              <div class="col-md-4">
                <div class="watchlist">
                  <div class="watchlist-img" data-aos="flip-right">
                    <img src="./images/watch-list-img2.jpg" alt=""> 
                    <div class="icon"><i class="icon-book-open"></i></div> 
                  </div>
                  <h5 class="mt-5">A Will Eternal</h5>
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
                </div>
              </div>
              <div class="col-md-4">
                <div class="watchlist">
                  <div class="watchlist-img" data-aos="flip-left">
                    <img src="./images/watch-list-img3.jpg" alt=""> 
                    <div class="icon"><i class="icon-book-open"></i></div> 
                  </div>
                  <h5 class="mt-5">Hajime no Ippo</h5>
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi adipisci provident eos sit omnis amet?</p>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- ContactUs -->
        <section id="Contact" class="bg-cover contact-us" style="width:100%;overflow:hidden;">
          <div class="overlay"></div>
          <div class="container text-white text-center">
            <div class="row g-4">
              <div class="col-12 section-current text-center" data-aos="zoom-out">
                <h1>Get in Touch</h1>
                <div class="divider"></div>
                <p>Lorem ipsum dolor sit amet consectetur, dipisicing elit. Debitis aspernatur accusantium laborum,  <br>  expedita, autem est in eos deserunt libero dicta commodi perferendis repellat, porro voluptatem.</p>
    
              </div>
            </div>
            <div class="row">
              <div class="col-md-8 mx-auto">
                <form action="#" class="row g-4" data-aos="fade-up">
                  <div class="form-group col-md-6">
                    <input type="text" class="form-control" placeholder="Full Name">
                  </div>
                  <div class="form-group col-md-6">
                    <input type="email" class="form-control" placeholder="Email address">
                  </div>
                  <div class="form-group col-md-12">
                    <input type="text" class="form-control" placeholder="Subject">
                  </div>
                  <div class="form-group col-md-12">
                    <textarea name="" id="" cols="30" rows="4" class="form-control" placeholder="Message"></textarea>
                  </div>
                  <div>
                  <button class="btn btn-main" type="submit">Send Message</button>
                  </div>
                </form>
              </div>
            </div>
          </div>  
        </section>
        <!-- Footer -->
        <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>
    
              </div>
            </div>
          </div>
        </footer>
        
        <script
          src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
          crossorigin="anonymous"
        ></script>
        <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
        <script src="app.js"></script>
      </body>
    </html>
    Login or Signup to reply.
  3. 0

    Add overflow-hidden class into these two element should fix your problems.

    enter image description here

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search