0

I have a problem with the navbar when displayed on a smartphone. The last item of the menu is a dropdown. It is not displayed unless I enlarge the screen. It is as if there was no more space to display the items of the submenu (while the other dropdwons work perfecty). Could somebody tell me what mistake I did ? Here is the code:

    <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
            <a class="pull-left"><img src="logo_navbar.png" alt="logo"></a><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="#"></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
     <li class="active">
  <a href="index.html">Home</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Associazione</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="chisiamo.html" title="Chi siamo">Chi siamo</a>
                                </li>
                                <li>
                                    <a href="struttura.html" title="struttura">Struttura</a>
                                <li>
                                    <a href="statuto.html" title="statuto">Statuto</a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bilancio Sociale</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="bilancio2015_16.html" title="bilancio2016">Bilancio 2015-2016</a>
                                </li>
                                <li>
                                    <a href="bilancio2014_15.html" title="bilancio2015">Bilancio 2014-2015</a>
                                </li>
                                <li>
                                    <a href="bilancio2013_14.html" title="bilancio2014">Bilancio 2013-2014</a>
                                </li>
                                <li>
                                    <a href="bilancio2012_13.html" title="bilancio2013">Bilancio 2012-2013</a>
                                </li>
                              </ul>
                        </li>
                        <li>
                            <a href="gara.html" title="gara">Gara di matematica</a>
                        </li>
                        <li>
                            <a href="news.html" title="news">News</a>
                        </li>
                        <li>
                            <a href="rassegnastampa.html" title="stampa">Rassegna stampa</a>
                        </li>
                        <li>
                            <a href="modulo.html" title="iscrizione">Iscrizione</a>
                        </li>
                          <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contatti</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="contatti.html" title="messaggi">Messaggi</a>
                                </li>
                                <li>
                                    <a href="dovesiamo.html" title="dove siamo">Dove siamo</a>
                                </li>
                                <li>
                                    <a href="newsletter.html" title="newsletter">Newsletter</a>
                                </li>
                              </ul>
                        </li>

                  </ul>
                </div>
            </div>
        </nav>
        <!--/.nav-collapse -->

Thank you very much in advance gabriele

gabrielebr
  • 1
  • 1
  • 1
    its working. [ https://jsfiddle.net/tjbaezid/xgvb3vtd/ ] click on the last one.. overflow will show your submenu – Baezid Mostafa Oct 13 '16 at 11:00
  • I can't see any "overflow" inside the code you wrote ! – gabrielebr Oct 13 '16 at 11:49
  • Bootstrap already set the scroll option by default. – Baezid Mostafa Oct 13 '16 at 12:19
  • I understood what is the problem. In reality, as you said, my navbar works BUT no scroll bar is shown on the smartphone. Nevertheless if I use the finger to scroll up the page the dropdown appears ! I don't have a smartphone therefore I know nothing about it... Why is it not possible to show the scrollbar on the dropdown menu ??? Thanks a lot – gabrielebr Oct 13 '16 at 12:47
  • [ https://i.stack.imgur.com/85d0I.png ] see this iPhone 5 scroll bar when click – Baezid Mostafa Oct 13 '16 at 13:38

3 Answers3

0

Your code works:

https://jsfiddle.net/8c8x558e/

I think the problem would be your bootstrap links, remember you have to put these links:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

I think you forgot the Js link.

Marc Pont
  • 988
  • 2
  • 14
  • 34
  • This is what I wrote into the head section: – gabrielebr Oct 13 '16 at 11:35
  • This is what I wrote into the head section – gabrielebr Oct 13 '16 at 11:39
  • I'm not sure if javascript tags works inside head section... Try to put them inside body tag, it's prefered to put at the end of the content. It's explained here: http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup – Marc Pont Oct 13 '16 at 11:48
0

Remove this css in mobile view .navbar-fixed-top {position: fixed;}

you can use {position: static;}

parag parmar
  • 148
  • 6
0

Also use class="caret" where the is a sub-menu to make sure there is a sub-menu I used it after the text "Contatti". For any question ask me in comment. LiveONFiddle :)

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <a class="pull-left"><img src="logo_navbar.png" alt="logo"></a>
  <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="#"></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="index.html">Home</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Associazione</a>
          <ul class="dropdown-menu">
            <li>
              <a href="chisiamo.html" title="Chi siamo">Chi siamo</a>
            </li>
            <li>
              <a href="struttura.html" title="struttura">Struttura</a>
              <li>
                <a href="statuto.html" title="statuto">Statuto</a>
              </li>
          </ul>
          </li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bilancio Sociale</a>
            <ul class="dropdown-menu">
              <li>
                <a href="bilancio2015_16.html" title="bilancio2016">Bilancio 2015-2016</a>
              </li>
              <li>
                <a href="bilancio2014_15.html" title="bilancio2015">Bilancio 2014-2015</a>
              </li>
              <li>
                <a href="bilancio2013_14.html" title="bilancio2014">Bilancio 2013-2014</a>
              </li>
              <li>
                <a href="bilancio2012_13.html" title="bilancio2013">Bilancio 2012-2013</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="gara.html" title="gara">Gara di matematica</a>
          </li>
          <li>
            <a href="news.html" title="news">News</a>
          </li>
          <li>
            <a href="rassegnastampa.html" title="stampa">Rassegna stampa</a>
          </li>
          <li>
            <a href="modulo.html" title="iscrizione">Iscrizione</a>
          </li>
          <li class="dropdown dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contatti <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="contatti.html" title="messaggi">Messaggi</a>
              </li>
              <li>
                <a href="dovesiamo.html" title="dove siamo">Dove siamo</a>
              </li>
              <li>
                <a href="newsletter.html" title="newsletter">Newsletter</a>
              </li>
            </ul>
          </li>

      </ul>
    </div>
  </div>
</nav>
<!--/.nav-collapse -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
Baezid Mostafa
  • 2,680
  • 2
  • 14
  • 26