Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Maties Alzina Soler
Maties Alzina Soler
2,307 Points

[Bootstrap question] My dropdown-menu is showed behind the text of the body.

Hi,

With bootstrap I'm using a dropdown button as a dropdown-menu collapsed (as for mobilephones). It's positioned as fixed to the top-right corner of the page. When I click on the button, the dropdown menu is showed with the properly links, but these are behind the text of the page, and I can't click on them. What can I do?

Here is the html code:

<div class="btn-group" id="menu-hamburger">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="hamburger-button">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" role="menu">
        <li><a href="#sobre-nosaltres" class="page-scroll">Sobre nosaltres</a></li>
        <li><a href="#serveis" class="page-scroll">Serveis</a></li>
        <li><a href="#productes" class="page-scroll">Productes</a></li>
        <li><a href="#equip" class="page-scroll">Equip</a></li>
        <li><a href="#contacte" class="page-scroll">Contacte</a></li>
      </ul>
    </div>

And here the css one:

#menu-hamburger {
    position: fixed;
    top: 10px;
    right: 20px;
}

.glyphicon-menu-hamburger {
    border-radius: 0;
    background: grey;
    font-size: 40px;
    color: #fff;
    padding: 5px;
    z-index: 101;
    margin: 0;
}

#hamburger-button {
    background: rgba(0,0,0,0);
    border: none;
    width: 50px;
    padding: 0;
}

.dropdown-menu {
    z-index: 100;
}

Thanks! :D

2 Answers

Maties Alzina Soler
Maties Alzina Soler
2,307 Points

Hi again,

I fixed the problem. I had written the code of the button group, which contains the dropdown menu, at the beginning (just after the html code of the navbar) of the index file. All I did it was to write the code of the button group at the end of the index file (just after the footer code). Now is working fine!

Thanks, anyway! :)

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Glad you got it working :)

Since I already made an update, here it is for reference CodePen.

  • changed navbar-fixed-right to navbar-fixed-top
  • added to body style rule: padding-top: 50px
  • changed #menu-hamburger style rule top: 10px to top: 50px

From Bootstrap docs:

Body padding required The fixed navbar will overlay your other content, unless you add padding to the top of the body tag. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Maties Alzina Soler,

I created a CodePen with your code. Emulating as an iPhone 4 with the dev console, I was not able to reproduce the problem you're describing. The menu links open over the text, not behind it.

What mobile device are you using?

Maties Alzina Soler
Maties Alzina Soler
2,307 Points

Hi Robert,

I'm using the PC. It's not responsive yet for mobile devices. I meant I have created a dropdown menu, but for large screens.

Here I put more of my HTML code:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
    <link href="css/scrolling-nav.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<!-- <link href="css/carousel.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="css/font-spartan.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:700,400|Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">


  </head>

  <body>

    <nav class="navbar navbar-default navbar-fixed-right" id="inici">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"><div id="main-logo"></div></a>
        </div>
        <div>
          <ul class="nav navbar-nav navbar-right">
            <li><a class="page-scroll" href="#sobre-nosaltres">Sobre nosaltres</a></li>
            <li><a class="page-scroll" href="#serveis">Serveis</a></li> 
            <li><a class="page-scroll" href="#productes">Productes</a></li>
            <li><a class="page-scroll" href="#equip">Equip</a></li>
            <li><a class="page-scroll" href="#contacte">Contacte</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="btn-group" id="menu-hamburger">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="hamburger-button">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" role="menu">
        <li><a href="#sobre-nosaltres" class="page-scroll">Sobre nosaltres</a></li>
        <li><a href="#serveis" class="page-scroll">Serveis</a></li>
        <li><a href="#productes" class="page-scroll">Productes</a></li>
        <li><a href="#equip" class="page-scroll">Equip</a></li>
        <li><a href="#contacte" class="page-scroll">Contacte</a></li>
      </ul>
    </div>

    <div class="jumbotron" id="sobre-nosaltres">
      <div class="container">
        <div class="row margin-bottom">
          <div class="col-md-6">
            <div class="page-header">
             <h1>Sobre nosaltres <br><small>Què som i què fem?</small></h1>
             <p>Ens dedicam a la promoció i prevenció de les dolències de l'esquena i les patologies associades.</p>
            </div> 
          </div>

          <div class="col-md-5 pull-right" id="about-us-image">
            <blockquote>
              <p class="text-muted">Ens ensenyen a xerrar, a llegir i a escriure. Però qui ens ensenya a cuidar de la nostra esquena?</p>
              <footer>Jaume Crespí</footer>
            </blockquote>
          </div>
        </div>

        <div class="row text-center">
          <div class="col-md-3">
            <div id="objectiu-image"></div>
            <h3>El nostre objectiu</h3>
            <p>Ensenyar a les persones a cuidar i entendre la seva esquena, i així prevenir el dolor.</p>
          </div>

          <div class="col-md-3">
            <div id="ef-image"></div>
            <h3>L'exercici físic</h3>
            <p>Fins a dia d'avui és l'únic mitjà preventiu real i natural, sempre i quan s'apliqui de forma adequada.</p>
          </div>

          <div class="col-md-3">
            <div id="filo-image"></div>
            <h3>La nostra filosofia</h3>
            <p>Ens basem en l'evidència científica més actual respecte el dolor d'esquena i la seva prevenció.</p>
          </div>

          <div class="col-md-3">
            <div id="target-image"></div>
            <h3>El nostre target</h3>
            <p>Qualsevol persona interessada en la millora de la salut de l'esquena (personal, professional o empresarial).</p>
          </div>
        </div>

        <div class="row text-center margin-bottom">
          <div class="col-md-3">
            <a href="#" class="btn btn-info btn-md">Més detalls &raquo;</a>
          </div>

          <div class="col-md-3">
            <a href="#" class="btn btn-info btn-md">Més detalls &raquo;</a>
          </div>

          <div class="col-md-3">
            <a href="#" class="btn btn-info btn-md">Més detalls &raquo;</a>
          </div>

          <div class="col-md-3">
            <a href="#" class="btn btn-info btn-md">Més detalls &raquo;</a>
          </div>
        </div>

        <div class="row text-center">
          <div class="col-md-5"></div>
          <div class="col-md-1">
            <a href="#inici" class="tornar-link page-scroll">
              <span class="glyphicon glyphicon-menu-up"></span><br>
            </a>
          </div>
          <div class="col-md-1">
            <a href="#serveis" class="tornar-link page-scroll">
              <span class="glyphicon glyphicon-menu-down">
            </a>
          </div>
          <div class="col-md-5"></div>
        </div>

      </div>
    </div>

    <div class="jumbotron" id="serveis">
      <div class="container">
        <div class="row margin-bottom">
          <div class="col-md-6">
            <div class="page-header">
             <h1>Serveis <br><small>Què podem oferir?</small></h1>
             <p>El nostre ventall és divers, i s'adapta a les vostres necessitats.</p>
            </div> 
          </div>
        </div>

        <div class="row margin-bottom">
          <div class="col-md-1">
          </div>
          <div class="col-md-5">
            <h3>Formació</h3>
            <p>Oferim formació a professionals de l'àmbit de l'exercici físic i la salut, en relació a la prevenció de les dolències d'esquena i les patologies associades.</p>
            <div><a class="btn btn-info btn-md" href="#" role="button">Veure detalls &raquo;</a></div>
          </div>
          <div class="col-md-5">
            <div class="text-center"><span class="glyphicon glyphicon-education"></span></div>
          </div>
          <div class="col-md-1">
          </div>
        </div>

        <div class="row margin-bottom">
          <div class="col-md-1">
          </div>
          <div class="col-md-5 text-center">
            <div><span class="glyphicon glyphicon-bullhorn"></span></div>
          </div>
          <div class="col-md-5">
            <h3>Promoció</h3>
            <p>Un dels nostres principals objectius és divulgar informació útil sobre com prevenir el dolor d'esquena. No tan sols pels professionals, sinó també a la població en general, atorgant a les persones recursos i consells útils per tal de millorar la seva salut.</p>
            <div><a class="btn btn-info btn-md" href="#" role="button">Veure detalls &raquo;</a></div>
          </div>
          <div class="col-md-1">
          </div>
        </div>

        <div class="row margin-bottom">
          <div class="col-md-1">
          </div>
          <div class="col-md-5">
            <h3>Assessorament</h3>
            <p>Tens pensat dur a terme un servei destinat a la promoció i/o prevenció de les dolències d'esquena, i necessites assessorament? Nosaltres t'ajudem tant a nivell logístic com tècnic. Conta'ns el teu cas!</p>
            <div><a class="btn btn-info btn-md" href="#" role="button">Veure detalls &raquo;</a></div>
          </div>
          <div class="col-md-5">
            <div class="text-center"><img class="assessorament" src="img/hand1.png"></div>
          </div>
          <div class="col-md-1">
          </div>
        </div>

        <div class="row margin-bottom">
          <div class="col-md-1">
          </div>
          <div class="col-md-5">
            <div class="text-center"><img id="tenda-image" src="img/tenda.png"></div>
          </div>
          <div class="col-md-5">
            <h3>Tenda</h3>
            <p>Disposem de material específic, a la venta i a l'abast de tothom, que et permetrà cuidar de la teva esquena, de forma segura i des de casa.</p>
            <div><a class="btn btn-info btn-md" href="#" role="button">Veure detalls &raquo;</a></div>
          </div>
          <div class="col-md-1">
          </div>
        </div>

        <div class="row margin-bottom-plus">
          <div class="col-md-1">
          </div>
          <div class="col-md-5">
            <h3>Projectes</h3>
            <p>Fins a dia d'avui és l'únic mitjà preventiu real i natural, sempre i quan s'apliqui de forma adequada.</p>
            <div><a class="btn btn-info btn-md" href="#" role="button">Veure detalls &raquo;</a></div>
          </div>
          <div class="col-md-5">
            <div class="text-center"><img class="assessorament" src="img/projectes.png"></div>
          </div>
          <div class="col-md-1">
          </div>
        </div>

        <div class="row text-center">
          <div class="col-md-5"></div>
          <div class="col-md-1">
            <a href="#inici" class="tornar-link page-scroll">
              <span class="glyphicon glyphicon-menu-up"></span><br>
            </a>
          </div>
          <div class="col-md-1">
            <a href="#productes" class="tornar-link page-scroll">
              <span class="glyphicon glyphicon-menu-down">
            </a>
          </div>
          <div class="col-md-5"></div>
        </div>

      </div>
    </div>

    <!-- FOOTER -->

    <footer class="main-footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-3">
            <img src="img/logo_color_in.png" alt="logo" id="logo-footer">
            <p class="margin-bottom-min">
              La nostra missió és contribuïr en la prevenció de les dolències d'esquena, i a promocionar el tenir cura de la salut de l'esquena.
            </p>
            <p class="copyright">&reg; 2015 BackFit</p>
          </div>
          <div class="col-sm-1"></div>
          <div class="col-sm-2">
            <ul class="link-list">
              <li class="heading"><a>Partners &rarr;</a></li>
              <li><a href="#">S'aiguablava</a></li>
              <li><a href="#">Fisioplanet</a></li>
            </ul>
          </div>
          <div class="col-sm-2">
            <ul class="link-list">
              <li class="heading"><a>Coneix-nos &rarr;</a></li>
              <li><a href="#sobre-nosaltres" class="page-scroll">Sobre nosaltres</a></li>
              <li><a href="#serveis" class="page-scroll">Serveis</a></li>
              <li><a href="#productes" class="page-scroll">Productes</a></li>
              <li><a href="#equip" class="page-scroll">Equip</a></li>
              <li><a href="#contacte" class="page-scroll">Contacte</a></li>
            </ul>            
          </div>
          <div class="col-sm-2">
            <ul class="link-list">
              <li class="heading"><a>Xarxes socials &rarr;</a></li>
              <li><a href="#">Facebook</a></li>
              <li><a href="#">Twitter</a></li>
            </ul>
          </div>
          <div class="col-sm-2">
            <ul class="link-list">
              <li class="heading"><a>Contacta'ns &rarr;</a></li>
              <li><a href="mailto:hi@teamtreehouse.com">info@backfit.es</a></li>
              <li>629 59 39 66</li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

            <!-- <div class="col-lg-6">
              <div class="text-center">Icons made by <a href="http://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></div>
            </div> -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>

  </body>
</html>

And here my CSS code:

body {
    background: #fff;
}

h1 {
    font-family: "League Spartan", sans-serif;
}

.main-title {
    margin-bottom: 100px;
    margin-top: 100px;
    font-size: 63px;
}

p {
    font-family: "Raleway", sans-serif;
    margin: 10px 0;
    font-size: 14px;
}

h2, a {
  margin: 0; padding: 0;
  font-family: "Raleway", sans-serif;
}

h3 {
    font-family: "Montserrat", sans-serif;
}

h2 {
    margin: 15px 0;
}

#main-logo {
    margin-top: -17px;
    width: 200px;
    height: 85px;
    background-image: url('../img/logo_color_in.png');
    background-repeat: no-repeat;
    background-size: 200px;
}

.active a {
    background: #404038;
}

ul li a {
    text-transform: uppercase;
    font-size: 0.9em;
}

ul li a:hover {
    color: #404038;
    font-weight: bold;
}

.navbar {
    border-radius: 0px;
    background: #404038;
    border: none;
    border-bottom: 5px solid #d3d3d3;
}

.jumbotron {
    margin-bottom: 0;
}

.jumbotron blockquote {
    border-left: solid 5px #404038;
    margin-top: 90px;
    height: 150px;
}

blockquote footer {
    background: rgba(0,0,0,0);
}

#objectiu-image {
    height: 150px;
    background: url('../img/map-nocolor.png')  no-repeat center;
    background-size: 150px;
}

#ef-image {
    height: 150px;
    background: url('../img/superman-color.png')  no-repeat center;
    background-size: 150px;
}

#filo-image {
    height: 150px;
    background: url('../img/filosofia-color.png')  no-repeat center;
    background-size: 120px;
}

#target-image {
    height: 150px;
    background: url('../img/target1.png')  no-repeat center;
    background-size: 120px;
}

.margin-bottom {
    margin-bottom: 100px;
}

.margin-bottom-plus {
    margin-bottom: 200px;
}

.margin-bottom-minus {
    margin-bottom: 50px;
}

.margin-bottom-poquet {
    margin-bottom: 25px;
}

.btn-info {
    background: rgba(0,0,0,0);
    color: #404038;
    border-color: #404038;
    border-width: 1px;
    border-radius: 2px;
    margin-top: 12px;
}

.btn-info:hover {
    background: #B3CA8A;
    color: #404038;
    border-color: #404038;
    font-weight: bold;
}

.btn-default {
    margin-top: 12px;
}

.btn-block:hover {
    background: #000;
    color: #fff;
    opacity: .6;
}

.glyphicon-menu-up, .glyphicon-menu-down {
    font-size: 50px;
    border: 1px solid #404038;
    border-radius: 100%;
    padding: 5px;
    color: #404038;
    margin: 0 5px;
}

.glyphicon-menu-up:hover, .glyphicon-menu-down:hover {
    border: 2px solid #404038;
}

a.tornar-link:link {
    color: #404038;
}

.assessorament {
    width: 250px;
}

#tenda-image {
    width: 210px;
}

#sobre-nosaltres {
    z-index: 300;
    background: #d3d3d3;
}

footer {
    background: #404038;
    color: lightgrey;
}

.main-footer {
    font-size: 1em;
    padding: 35px 0;
}
.link-list {
    list-style-type: none;
    line-height: 1.8;
    margin: 0;
    padding: 0;
}
.copyright {
    opacity: .8;
    font-size: .9em;
}

.main-footer a {
    color: #a6afb2;
    text-decoration: none;
}

.main-footer a:hover {
    color: #fff;
}

.link-list .heading {
    font-weight: bold;
    margin-bottom: 10px;
}

#logo-footer {
    width: 200px;
    margin-bottom: 20px;
}

.margin-bottom-min {
    margin-bottom: 20px;
}


#inici {
    z-index: 200;
}

#menu-hamburger {
    position: fixed;
    top: 10px;
    right: 20px;
}

.glyphicon-menu-hamburger {
    border-radius: 0;
    background: grey;
    font-size: 40px;
    color: #fff;
    padding: 5px;
    z-index: 101;
    margin: 0;
    transition: font-size .5s;
}

.glyphicon-menu-hamburger:hover {
    font-size: 44px;
}

#hamburger-button {
    background: rgba(0,0,0,0);
    border: none;
    width: 50px;
    padding: 0;
}

.dropdown-menu {
    z-index: 100;
}

Thanks!