CODEWITHSUNDEEP
bootstrap-4navbarresponsive
Yuriy Semenikhin
Yuriy Semenikhin

Reputation: 90

Bootstrap 4 responsive menu stoped being responsive :-/

As a non front end person, I've looked through some answers already, so no throwing rotten tomatoes ;-)

Ive got a bootstrap 4 nav menu which is supposed to be responsive

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>

    <script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>
    <script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"><\/script>')</script>
    <script src="Libs/Popper/popper.min.js"></script>
    <script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>



    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap-grid.css" media="all">
    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap-reboot.css" media="all">
    <!--
    <link rel="stylesheet" type="text/css" href="css/Common.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/Slider.css" media="all">
    -->

</head>

<body>

<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-light">

    <a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">
        <!-- Carousel -->
    </a>

    <div class="collapse navbar-collapse offcanvas-collapse" id="main_menu">

        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">PRODUKTE</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DIENSTLEISTUNGEN</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">UNTERNEHMEN</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">NEWSROOM-STORY</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">SPOTLIGHT:TECHNIK

                </a>
            </li>
        </ul>

        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-danger" href="#">SHOP</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DATENSCHUTZ</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">KONTAKT</a>
            </li>
        </ul>

        <!-- Language Menu -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">DE</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">EN</a>
            </li>
        </ul>

        <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
            <span class="navbar-toggler-icon"></span>
        </button>

    </div>

</nav>

The menu seemed to work fine until it stopped working. I've gone throught a bunch of tutorials and also through other people's questions.

I tried moving JQuery and later all other JavaScript files to load before CSS. I have tried other looking into layouts on other sites and copying some of their code into mine, but the thing still does not want to change when window size changes.

The Logo remains but the menu items either stay as they are or disappear from the screen completely.

My coworker looked at the code and he was as gobsmacked as myself, but we both specialize in more of a back end development :-)

Upvotes: 1

Views: 329

Answers (1)

IvanS95
IvanS95

Reputation: 5732

You have included multiple css files that are not really needed, you only need bootstrap.css or bootstrap.min.css if you intend to include the whole framework, as well as jQuery and boostrap.js. Try to follow the structure detailed in the docs: https://getbootstrap.com/docs/4.1/getting-started/introduction/

Now this is the markup you need to have a functional responsive navbar, compare it with your code to see if something is missing; I see you are including multiple ul.navbar-nav why is that?

EDIT: Think I found your issue, on the toggle button:

<button class="navbar-toggler p-0 border-0 ml-auto" type="button" data-toggle="collapse" data-target="#main_menu">
     <span class="navbar-toggler-icon"></span>
<button>

Change the data-toggle to collapse, don't know why you changed it; you also need to have a data-target="#your navbar ID" on the same button

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <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="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

This is using your code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#"><img src="Images/logo.png" alt=""> Brand
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_menu">
                                <span class="navbar-toggler-icon"></span>
                            </button>

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

    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">PRODUKTE</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">DIENSTLEISTUNGEN</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">UNTERNEHMEN</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">NEWSROOM-STORY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">SPOTLIGHT:TECHNIK
                        
                                        </a>
      </li>
    </ul>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-danger" href="#">SHOP</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">DATENSCHUTZ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">KONTAKT</a>
      </li>
    </ul>

    <!-- Language Menu -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">DE</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">EN</a>
      </li>
    </ul>



  </div>

</nav>

Upvotes: 1

Related Questions