CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mookayama
Mookayama

Reputation: 1343

bootstrap drop down get covered by header

I have the code below. I test it on jsbin and then the preview works fine but when I download the file and open it in google chrome the drop down menu get hide by the header??

Also the left side of the page got cuts out on chrome.

Thanks so much for the help

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

<head>
  <title>Ristorante Con Fusion</title>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">

            <li class="active"><a href="#"><span class="glyphicon glyphicon-home"
                             aria-hidden="true"></span> Home</a>
            </li>



            <li><a href="#">About</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                             Menu <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Appetizers</a>
                </li>
                <li><a href="#">Main Courses</a>
                </li>
                <li><a href="#">Desserts</a>
                </li>
                <li><a href="#">Drinks</a>
                </li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Specials</li>
                <li><a href="#">Lunch Buffet</a>
                </li>
                <li><a href="#">Weekend Brunch</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Contact</a>
            </li>
          </ul>
        </div>
  </nav>

  <header class="jumbotron">

    <!-- Main component for a primary marketing message or call to action -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <!-- The above 3 meta tags *must* come first in the head; any other head 
                 content must come *after* these tags -->

    <div class="row row-header">
      <div class="row">
        <div class="col-xs-12 col-sm-8">
          <h1>Ristorante con Fusion</h1>
          <p style="padding:40px;"></p>
          <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="row row-content">
      <div class="col-xs-12 col-sm-3 col-sm-push-9">
        <p style="padding:20px;"></p>
        <h3 align=center>Our Lipsmacking Culinary Creations</h3>
      </div>
      <div class="col-xs-12 col-sm-9 col-sm-pull-3">
        <h2>Uthappizza</h2>
        <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
        <p><a href="#">More &raquo;</a>
        </p>
      </div>
    </div>


    <div class="row row-content">
      <div class="col-xs-12 col-sm-3 col-sm-push-9">
        <p style="padding:20px;"></p>
        <h3 align=center>This Month's Promotions</h3>
      </div>
      <div class="col-xs-12 col-sm-9 col-sm-pull-3">
        <h2>Weekend Grand Buffet</h2>
        <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person</p>
        <p><a href="#">More &raquo;</a>
        </p>
      </div>
    </div>

    <div class="row row-content">
      <div class="col-xs-12 col-sm-3 col-sm-push-9">
        <p style="padding:20px;"></p>
        <h3 align=center>Meet our Culinary Specialists</h3>
      </div>
      <div class="col-xs-12 col-sm-9 col-sm-pull-3">
        <h2>Alberto Somayya</h2>
        <h4>Executive Chef</h4>
        <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences.</p>
        <p><a href="#">More &raquo;</a>
        </p>
      </div>
    </div>
  </div>

  <footer class="row-footer">
    <div class="row">
      <div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">

        <h5>Links</h5>
        <ul class="list-unstyled">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">About</a>
          </li>
          <li><a href="#">Menu</a>
          </li>
          <li><a href="#">Contact</a>
          </li>
        </ul>
      </div>
      <div class="col-xs-6 col-sm-5">
        <h5>Our Address</h5>
        <address>
    		              121, Clear Water Bay Road<br>
    		              Clear Water Bay, Kowloon<br>
    		              HONG KONG<br>
    		             <!-- Tel.: +852 1234 5678<br>
    		              Fax: +852 8765 4321<br>
    		              Email: <a href="mailto:[email protected]">[email protected]</a>-->
    		           </address>

        <i class="fa fa-phone"></i>: +852 1234 5678
        <br>
        <i class="fa fa-fax"></i>: +852 8765 4321
        <br>
        <i class="fa fa-envelope"></i>:
        <a href="mailto:[email protected]">[email protected]</a> 
      </div>

      <div class="nav navbar-nav" style="padding: 40px 10px;">
        <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
        <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
        <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
        <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
        <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
      </div>

      <!--
                    <div class="col-xs-12 col-sm-4">
                        <div style="padding: 40px 10px;">
                            <a href="http://google.com/+">Google+</a>
                            <a href="http://www.facebook.com/profile.php?id=">Facebook</a>
                            <a href="http://www.linkedin.com/in/">LinkedIn</a>
                            <a href="http://twitter.com/">Twitter</a>
                            <a href="http://youtube.com/">YouTube</a>
                            <a href="mailto:">Mail</a>
                        </div>
                    </div>-->
      <div class="col-xs-12">
        <p style="padding:10px;"></p>
        <p align=center>© Copyright 2015 Ristorante Con Fusion</p>
      </div>
    </div>
  </footer>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>

</body>

</html>

Upvotes: 0

Views: 444

Answers (1)

Matt Komarnicki
Matt Komarnicki

Reputation: 5422

If an element is covered by another it probably means that you should define position (relative / absolute - determine it by yourself as you know your code best) for both and z-index. Then put higher z-index value for element that you want to be on top.

Upvotes: 1

Related Questions