Bootstrap multi level menu issues on mobile









up vote
0
down vote

favorite












My problem is, that when i am looking at the site on mobile, i cant see the submenus.



For example:
I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.



<ul class="nav nav-justified">
<li><a href="https://projektar.hu/kategoria/4/alaplap" class="dropdown-toggle" data-toggle="dropdown">Alaplap<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/74/alaplap/intel-alaplap" class="dropdown-toggle" data-toggle="dropdown">Intel alaplap</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/83/alaplap/intel-alaplap/asus-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/86/alaplap/intel-alaplap/asus-alaplap/asus-z370-alaplap">Asus Z370 alaplap</a></li>
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/87/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus Z390 Express alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/88/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/aaa">aaaaa</a></li>
<li><a href="https://projektar.hu/kategoria/89/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/bbb">bbbb</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/84/alaplap/intel-alaplap/msi-alaplap">MSI alaplap</a></li>
<li><a href="https://projektar.hu/kategoria/85/alaplap/intel-alaplap/gigabyte-alaplap">Gigabyte alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/75/alaplap/amd-alaplap">AMD alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/73/ssd-meghajto">SSD meghajtó</a></li>
<li><a href="https://projektar.hu/kategoria/76/videokartya">Videókártya</a></li>
<li><a href="https://projektar.hu/kategoria/77/memoria">Memória</a></li>
<li><a href="https://projektar.hu/kategoria/78/tapegyseg">Tápegység</a></li>
<li><a href="https://projektar.hu/kategoria/79/merevlemez">Merevlemez</a></li>
<li><a href="https://projektar.hu/kategoria/80/monitor">Monitor</a></li>
<li><a href="https://projektar.hu/kategoria/81/telefontok" class="dropdown-toggle" data-toggle="dropdown">Telefontok<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/82/telefontok/samsung-telefontok">Samsung telefontok</a></li>
</ul>
</li>
</ul>


You can take a look at my demo site at here: My demo site










share|improve this question









New contributor




max777 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.























    up vote
    0
    down vote

    favorite












    My problem is, that when i am looking at the site on mobile, i cant see the submenus.



    For example:
    I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.



    <ul class="nav nav-justified">
    <li><a href="https://projektar.hu/kategoria/4/alaplap" class="dropdown-toggle" data-toggle="dropdown">Alaplap<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/74/alaplap/intel-alaplap" class="dropdown-toggle" data-toggle="dropdown">Intel alaplap</a>
    <ul class="dropdown-menu">
    <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/83/alaplap/intel-alaplap/asus-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus alaplap</a>
    <ul class="dropdown-menu">
    <li><a href="https://projektar.hu/kategoria/86/alaplap/intel-alaplap/asus-alaplap/asus-z370-alaplap">Asus Z370 alaplap</a></li>
    <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/87/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus Z390 Express alaplap</a>
    <ul class="dropdown-menu">
    <li><a href="https://projektar.hu/kategoria/88/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/aaa">aaaaa</a></li>
    <li><a href="https://projektar.hu/kategoria/89/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/bbb">bbbb</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="https://projektar.hu/kategoria/84/alaplap/intel-alaplap/msi-alaplap">MSI alaplap</a></li>
    <li><a href="https://projektar.hu/kategoria/85/alaplap/intel-alaplap/gigabyte-alaplap">Gigabyte alaplap</a></li>
    </ul>
    </li>
    <li><a href="https://projektar.hu/kategoria/75/alaplap/amd-alaplap">AMD alaplap</a></li>
    </ul>
    </li>
    <li><a href="https://projektar.hu/kategoria/73/ssd-meghajto">SSD meghajtó</a></li>
    <li><a href="https://projektar.hu/kategoria/76/videokartya">Videókártya</a></li>
    <li><a href="https://projektar.hu/kategoria/77/memoria">Memória</a></li>
    <li><a href="https://projektar.hu/kategoria/78/tapegyseg">Tápegység</a></li>
    <li><a href="https://projektar.hu/kategoria/79/merevlemez">Merevlemez</a></li>
    <li><a href="https://projektar.hu/kategoria/80/monitor">Monitor</a></li>
    <li><a href="https://projektar.hu/kategoria/81/telefontok" class="dropdown-toggle" data-toggle="dropdown">Telefontok<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="https://projektar.hu/kategoria/82/telefontok/samsung-telefontok">Samsung telefontok</a></li>
    </ul>
    </li>
    </ul>


    You can take a look at my demo site at here: My demo site










    share|improve this question









    New contributor




    max777 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.





















      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      My problem is, that when i am looking at the site on mobile, i cant see the submenus.



      For example:
      I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.



      <ul class="nav nav-justified">
      <li><a href="https://projektar.hu/kategoria/4/alaplap" class="dropdown-toggle" data-toggle="dropdown">Alaplap<b class="caret"></b></a>
      <ul class="dropdown-menu">
      <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/74/alaplap/intel-alaplap" class="dropdown-toggle" data-toggle="dropdown">Intel alaplap</a>
      <ul class="dropdown-menu">
      <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/83/alaplap/intel-alaplap/asus-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus alaplap</a>
      <ul class="dropdown-menu">
      <li><a href="https://projektar.hu/kategoria/86/alaplap/intel-alaplap/asus-alaplap/asus-z370-alaplap">Asus Z370 alaplap</a></li>
      <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/87/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus Z390 Express alaplap</a>
      <ul class="dropdown-menu">
      <li><a href="https://projektar.hu/kategoria/88/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/aaa">aaaaa</a></li>
      <li><a href="https://projektar.hu/kategoria/89/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/bbb">bbbb</a></li>
      </ul>
      </li>
      </ul>
      </li>
      <li><a href="https://projektar.hu/kategoria/84/alaplap/intel-alaplap/msi-alaplap">MSI alaplap</a></li>
      <li><a href="https://projektar.hu/kategoria/85/alaplap/intel-alaplap/gigabyte-alaplap">Gigabyte alaplap</a></li>
      </ul>
      </li>
      <li><a href="https://projektar.hu/kategoria/75/alaplap/amd-alaplap">AMD alaplap</a></li>
      </ul>
      </li>
      <li><a href="https://projektar.hu/kategoria/73/ssd-meghajto">SSD meghajtó</a></li>
      <li><a href="https://projektar.hu/kategoria/76/videokartya">Videókártya</a></li>
      <li><a href="https://projektar.hu/kategoria/77/memoria">Memória</a></li>
      <li><a href="https://projektar.hu/kategoria/78/tapegyseg">Tápegység</a></li>
      <li><a href="https://projektar.hu/kategoria/79/merevlemez">Merevlemez</a></li>
      <li><a href="https://projektar.hu/kategoria/80/monitor">Monitor</a></li>
      <li><a href="https://projektar.hu/kategoria/81/telefontok" class="dropdown-toggle" data-toggle="dropdown">Telefontok<b class="caret"></b></a>
      <ul class="dropdown-menu">
      <li><a href="https://projektar.hu/kategoria/82/telefontok/samsung-telefontok">Samsung telefontok</a></li>
      </ul>
      </li>
      </ul>


      You can take a look at my demo site at here: My demo site










      share|improve this question









      New contributor




      max777 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      My problem is, that when i am looking at the site on mobile, i cant see the submenus.



      For example:
      I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.



      <ul class="nav nav-justified">
      <li><a href="https://projektar.hu/kategoria/4/alaplap" class="dropdown-toggle" data-toggle="dropdown">Alaplap<b class="caret"></b></a>
      <ul class="dropdown-menu">
      <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/74/alaplap/intel-alaplap" class="dropdown-toggle" data-toggle="dropdown">Intel alaplap</a>
      <ul class="dropdown-menu">
      <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/83/alaplap/intel-alaplap/asus-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus alaplap</a>
      <ul class="dropdown-menu">
      <li><a href="https://projektar.hu/kategoria/86/alaplap/intel-alaplap/asus-alaplap/asus-z370-alaplap">Asus Z370 alaplap</a></li>
      <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/87/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus Z390 Express alaplap</a>
      <ul class="dropdown-menu">
      <li><a href="https://projektar.hu/kategoria/88/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/aaa">aaaaa</a></li>
      <li><a href="https://projektar.hu/kategoria/89/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/bbb">bbbb</a></li>
      </ul>
      </li>
      </ul>
      </li>
      <li><a href="https://projektar.hu/kategoria/84/alaplap/intel-alaplap/msi-alaplap">MSI alaplap</a></li>
      <li><a href="https://projektar.hu/kategoria/85/alaplap/intel-alaplap/gigabyte-alaplap">Gigabyte alaplap</a></li>
      </ul>
      </li>
      <li><a href="https://projektar.hu/kategoria/75/alaplap/amd-alaplap">AMD alaplap</a></li>
      </ul>
      </li>
      <li><a href="https://projektar.hu/kategoria/73/ssd-meghajto">SSD meghajtó</a></li>
      <li><a href="https://projektar.hu/kategoria/76/videokartya">Videókártya</a></li>
      <li><a href="https://projektar.hu/kategoria/77/memoria">Memória</a></li>
      <li><a href="https://projektar.hu/kategoria/78/tapegyseg">Tápegység</a></li>
      <li><a href="https://projektar.hu/kategoria/79/merevlemez">Merevlemez</a></li>
      <li><a href="https://projektar.hu/kategoria/80/monitor">Monitor</a></li>
      <li><a href="https://projektar.hu/kategoria/81/telefontok" class="dropdown-toggle" data-toggle="dropdown">Telefontok<b class="caret"></b></a>
      <ul class="dropdown-menu">
      <li><a href="https://projektar.hu/kategoria/82/telefontok/samsung-telefontok">Samsung telefontok</a></li>
      </ul>
      </li>
      </ul>


      You can take a look at my demo site at here: My demo site







      html css twitter-bootstrap drop-down-menu dropdown






      share|improve this question









      New contributor




      max777 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      max777 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited Nov 10 at 14:05









      jww

      51.8k37211477




      51.8k37211477






      New contributor




      max777 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked Nov 10 at 13:13









      max777

      31




      31




      New contributor




      max777 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      max777 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      max777 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.



          .dropdown-submenu 
          position: relative;

          .dropdown-submenu > .dropdown-menu
          top: 0;
          left: 100%;
          margin-top: -6px;
          margin-left: -1px;

          .dropdown-submenu:hover > .dropdown-menu
          display: block;

          .dropdown-submenu:hover > a:after
          border-left-color: #fff;

          .dropdown-submenu.pull-left
          float: none;

          .dropdown-submenu.pull-left > .dropdown-menu
          left: -100%;
          margin-left: 10px;



          and here is the actual html to power your menu...feel free to change the css accordingly.



          <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">

          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="#">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
          <li><a href="#">Link</a></li>
          <li class="dropdown-submenu">
          <a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
          <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Link 1</a></li>
          <li><a href="#">Lik 2</a></li>
          <li><a href="#">Link 3</a></li>
          </ul>
          </li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          </ul>
          </li> <!-- .dropdown -->
          </ul> <!-- .nav .navbar-nav -->
          </div><!-- /.navbar-collapse -->

          </div><!-- /.container-fluid -->
          </nav>


          Codepen solution to see it working






          share|improve this answer




















          • And how many level can i add to this menu? Or only just 2?
            – max777
            Nov 10 at 14:25










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );






          max777 is a new contributor. Be nice, and check out our Code of Conduct.









           

          draft saved


          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239289%2fbootstrap-multi-level-menu-issues-on-mobile%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote













          This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.



          .dropdown-submenu 
          position: relative;

          .dropdown-submenu > .dropdown-menu
          top: 0;
          left: 100%;
          margin-top: -6px;
          margin-left: -1px;

          .dropdown-submenu:hover > .dropdown-menu
          display: block;

          .dropdown-submenu:hover > a:after
          border-left-color: #fff;

          .dropdown-submenu.pull-left
          float: none;

          .dropdown-submenu.pull-left > .dropdown-menu
          left: -100%;
          margin-left: 10px;



          and here is the actual html to power your menu...feel free to change the css accordingly.



          <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">

          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="#">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
          <li><a href="#">Link</a></li>
          <li class="dropdown-submenu">
          <a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
          <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Link 1</a></li>
          <li><a href="#">Lik 2</a></li>
          <li><a href="#">Link 3</a></li>
          </ul>
          </li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          </ul>
          </li> <!-- .dropdown -->
          </ul> <!-- .nav .navbar-nav -->
          </div><!-- /.navbar-collapse -->

          </div><!-- /.container-fluid -->
          </nav>


          Codepen solution to see it working






          share|improve this answer




















          • And how many level can i add to this menu? Or only just 2?
            – max777
            Nov 10 at 14:25














          up vote
          0
          down vote













          This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.



          .dropdown-submenu 
          position: relative;

          .dropdown-submenu > .dropdown-menu
          top: 0;
          left: 100%;
          margin-top: -6px;
          margin-left: -1px;

          .dropdown-submenu:hover > .dropdown-menu
          display: block;

          .dropdown-submenu:hover > a:after
          border-left-color: #fff;

          .dropdown-submenu.pull-left
          float: none;

          .dropdown-submenu.pull-left > .dropdown-menu
          left: -100%;
          margin-left: 10px;



          and here is the actual html to power your menu...feel free to change the css accordingly.



          <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">

          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="#">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
          <li><a href="#">Link</a></li>
          <li class="dropdown-submenu">
          <a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
          <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Link 1</a></li>
          <li><a href="#">Lik 2</a></li>
          <li><a href="#">Link 3</a></li>
          </ul>
          </li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          </ul>
          </li> <!-- .dropdown -->
          </ul> <!-- .nav .navbar-nav -->
          </div><!-- /.navbar-collapse -->

          </div><!-- /.container-fluid -->
          </nav>


          Codepen solution to see it working






          share|improve this answer




















          • And how many level can i add to this menu? Or only just 2?
            – max777
            Nov 10 at 14:25












          up vote
          0
          down vote










          up vote
          0
          down vote









          This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.



          .dropdown-submenu 
          position: relative;

          .dropdown-submenu > .dropdown-menu
          top: 0;
          left: 100%;
          margin-top: -6px;
          margin-left: -1px;

          .dropdown-submenu:hover > .dropdown-menu
          display: block;

          .dropdown-submenu:hover > a:after
          border-left-color: #fff;

          .dropdown-submenu.pull-left
          float: none;

          .dropdown-submenu.pull-left > .dropdown-menu
          left: -100%;
          margin-left: 10px;



          and here is the actual html to power your menu...feel free to change the css accordingly.



          <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">

          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="#">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
          <li><a href="#">Link</a></li>
          <li class="dropdown-submenu">
          <a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
          <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Link 1</a></li>
          <li><a href="#">Lik 2</a></li>
          <li><a href="#">Link 3</a></li>
          </ul>
          </li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          </ul>
          </li> <!-- .dropdown -->
          </ul> <!-- .nav .navbar-nav -->
          </div><!-- /.navbar-collapse -->

          </div><!-- /.container-fluid -->
          </nav>


          Codepen solution to see it working






          share|improve this answer












          This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.



          .dropdown-submenu 
          position: relative;

          .dropdown-submenu > .dropdown-menu
          top: 0;
          left: 100%;
          margin-top: -6px;
          margin-left: -1px;

          .dropdown-submenu:hover > .dropdown-menu
          display: block;

          .dropdown-submenu:hover > a:after
          border-left-color: #fff;

          .dropdown-submenu.pull-left
          float: none;

          .dropdown-submenu.pull-left > .dropdown-menu
          left: -100%;
          margin-left: 10px;



          and here is the actual html to power your menu...feel free to change the css accordingly.



          <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">

          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="#">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
          <li><a href="#">Link</a></li>
          <li class="dropdown-submenu">
          <a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
          <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Link 1</a></li>
          <li><a href="#">Lik 2</a></li>
          <li><a href="#">Link 3</a></li>
          </ul>
          </li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          </ul>
          </li> <!-- .dropdown -->
          </ul> <!-- .nav .navbar-nav -->
          </div><!-- /.navbar-collapse -->

          </div><!-- /.container-fluid -->
          </nav>


          Codepen solution to see it working







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 10 at 13:30









          Frankenmint

          7341622




          7341622











          • And how many level can i add to this menu? Or only just 2?
            – max777
            Nov 10 at 14:25
















          • And how many level can i add to this menu? Or only just 2?
            – max777
            Nov 10 at 14:25















          And how many level can i add to this menu? Or only just 2?
          – max777
          Nov 10 at 14:25




          And how many level can i add to this menu? Or only just 2?
          – max777
          Nov 10 at 14:25










          max777 is a new contributor. Be nice, and check out our Code of Conduct.









           

          draft saved


          draft discarded


















          max777 is a new contributor. Be nice, and check out our Code of Conduct.












          max777 is a new contributor. Be nice, and check out our Code of Conduct.











          max777 is a new contributor. Be nice, and check out our Code of Conduct.













           


          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239289%2fbootstrap-multi-level-menu-issues-on-mobile%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          How to read a connectionString WITH PROVIDER in .NET Core?

          Node.js Script on GitHub Pages or Amazon S3

          Museum of Modern and Contemporary Art of Trento and Rovereto