CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
George Welder
George Welder

Reputation: 4045

Bootstrap Dropdown menu / Navigation takes up whole screen width (but isn't supposed to)

I have the following problem. I am trying to create a dropdown menu, and I am using mainly bootstrap for this. It seemed to work at first, but then I realised that the dropdown menu takes up the whole screen width, but I have no idea why. I coloured it red so you can see what I mean exactly. The navbar menu seems to flow over into the dropdown (since I only colour the navbar red, nothing else, but it all becomes red).

The red background is supposed to be only behind the upper nav menu (the upper boxes), not further. It should be white there, - apart from the dropdown boxes.

Here is my code thus far:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Some Title</title>

    <link rel="stylesheet" type="text/css" href="style2.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="container-fluid nopadding navbar"> <!-- NAVBAR -->
      <div class="row">

        <div class="container-fluid col-xs-12 col-sm-12 col-md-10"> <!-- MENU -->
          <div class="row">

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Welcome</button>
                </div>
              </div>
            </div>

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Dropdown</button>
                  <div class="dropdown-content col-xs-12 nopadding">
                    <a href="#">Software<br />entwicklung</a>
                    <a href="#">Qualitats<br />sicherung</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Our Company</button>
                  <div class="dropdown-content col-xs-12 nopadding">
                    <a href="#">Some Stuff</a>
                    <a href="#">Some more Stuff</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Find us</button>
                </div>
              </div>
            </div>

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Contact </button>
                </div>
              </div>
            </div>

          </div>
        </div> <!-- MENU END -->

        <div class="col-xs-12 col-md-2">
          <div class="logo_aligner">
            <!-- <img src="images/logonav.svg" class="hs-logo" alt="Some Text"> -->
          </div>
        </div>

      </div>
    </div> <!-- NAVBAR END -->
  </body>

</html>

CSS:

/* Dropdown Button */
.dropbtn {
    background-color: #F6F8FB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;

    background-color: #F6F8FB;
    font-family: AlegreyaSansSC-Light;
    font-size: 16px;
    color: #637F92;
    letter-spacing: 0.52px;

    height: 81px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #F6F8FB;
    min-width: 160px;
    z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}

/*Smartphones */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .dropdown-content {
    width: 100%;
    text-align: center;
  }
  .hs-logo {
    visibility: hidden;
  }
}

/*Tablets */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  .hs-logo {
    visibility: hidden;
  }

  .dropbtn {
    font-size: 12px;
    padding: 0;
  }
}

/* Normal Browser resize */
@media screen
  and (max-width: 1024px) {

  .hs-logo {
    visibility: hidden;
  }
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}

.hs-logo {
  width: 100%;
  height: 25px;
}

.nopadding { /* Important for the contents of the dropdown menu, since bootstrap is applied*/
   padding: 0 !important;
   margin: 0 !important;
}

.logo_aligner {
  background-color: red;

  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar {
  background-color: red;
}

Upvotes: 0

Views: 1595

Answers (1)

Flink
Flink

Reputation: 1006

First of all, here is a link to a simple Bootstrap menu, which is great for reference. When working with Bootstrap menus I always inspect these examples.

To your specific example: For overlapping stuff like the dropdown you need some position: absolute; for it to work.

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    top: 80px;
    position: absolute;
}

Full example: https://jsfiddle.net/flink1991/566j7bht/

Upvotes: 1

Related Questions