Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

mfandel

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • April 16, 2015 at 08:56 in reply to: Combine Vertical and Horizontal #2381
    mfandel
    Participant

    Ok, some late night searching and trying I have it close to working so wanted to share.
    To be safe, not sure if this is the best way to do this, but I got it to work with a few css hacks. If anyone has a better solution please let me know.

    Also I do have one last issue I can’t figure out.
    on the second level of navigation that I was able to make horizontal the arrow is way over to the left and there are not arrows on each item that has a dropdown. Any help would be great.

    Here is the changed version:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">

<!-- Bootstrap core CSS -->
<link href="../libs/demo-assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">


</head>
<style>
	.navbar-blue{background-color:#00477f; min-height:110px;}
	a {color:#fff;}
	a:hover{background-color: #008bc4 !important;}
	.navbar-toggle .icon-bar{background-color:#fff;}
	.mainlinks{width:100%;}
	.dropdown-menu{background-color:#008bc4 !important;}
	.dropdown-menu > li> a {color:#fff !important;}
.mainlinks > li {position: static !important; display:inline;}
 .mainlinks > li > ul {margin-left:0 !important;	right:0 !important;	width:auto !important; 	max-width:none !important;}
	.subnav1 >  li {display: inline !important; float:left !important;}
	.open> ul.subnav1 {display: inline-flex !important;}
.subnav1 >li {position: static !important;}
 .subnav1 > li > ul {position:relative !important; margin-left:0 !important; top:33px !important;	left:0px !important; 	width:auto !important; 	max-width:none !important;}
 .subnav1{max-height: 35px;}
 .subnav1 a:hover{background-color: #00477f !important;}
.nav .open>a,.nav .open>a:hover,.nav .open>a:focus{background-color:#008bc4!important;}


</style>
<body>


<!-- Static navbar -->
<div class="navbar navbar-blue" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#">LOGO HERE</a>
  </div>
  <div class="navbar-collapse collapse">

    <!-- Left nav -->
    <ul class="nav navbar-nav mainlinks">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Dropdown</a>
        <ul class="dropdown-menu subnav1">
          <li><a href="#">Action One</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a>
            <ul class="dropdown-menu subnav2">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
          </ul>
          </li>
        
          <!--<li class="divider"></li>-->
          <!--<li class="dropdown-header">Nav header</li>-->
          <li><a href="#">Another Drop Down</a>
          <ul class="dropdown-menu subnav2">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
          </ul>
          </li>
          <li><a href="#">One more separated link</a>
            <ul class="dropdown-menu subnav2">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="disabled"><a href="#">Disabled item</a></li>
                  <li><a href="#">One more link</a></li>
                  <li><a href="#">Menu item 1</a></li>
                  <li><a href="#">Menu item 2</a></li>
                  <li><a href="#">Menu item 3</a></li>
                  <li><a href="#">Menu item 4</a></li>
                  <li><a href="#">Menu item 5</a></li>
                  <li><a href="#">Menu item 6</a></li>
                  <li><a href="#">Menu item 7</a></li>
                  <li><a href="#">Menu item 8</a></li>
                  <li><a href="#">Menu item 9</a></li>
                  <li><a href="#">Menu item 10</a></li>
                  <li><a href="#">Menu item 11</a></li>
                  <li><a href="#">Menu item 12</a></li>
                  <li><a href="#">Menu item 13</a></li>
                  <li><a href="#">Menu item 14</a></li>
                  <li><a href="#">Menu item 15</a></li>
                  <li><a href="#">Menu item 16</a></li>
                  <li><a href="#">Menu item 17</a></li>
                  <li><a href="#">Menu item 18</a></li>
                  <li><a href="#">Menu item 19</a></li>
                  <li><a href="#">Menu item 20</a></li>
                  <li><a href="#">Menu item 21</a></li>
                  <li><a href="#">Menu item 22</a></li>
                  <li><a href="#">Menu item 23</a></li>
                  <li><a href="#">Menu item 24</a></li>
                  <li><a href="#">Menu item 25</a></li>
                  <li><a href="#">Menu item 26</a></li>
                  <li><a href="#">Menu item 27</a></li>
                  <li><a href="#">Menu item 28</a></li>
                  <li><a href="#">Menu item 29</a></li>
                  <li><a href="#">Menu item 30</a></li>
                  <li><a href="#">Menu item 31</a></li>
                  <li><a href="#">Menu item 32</a></li>
                  <li><a href="#">Menu item 33</a></li>
                  <li><a href="#">Menu item 34</a></li>
                  <li><a href="#">Menu item 35</a></li>
                  <li><a href="#">Menu item 36</a></li>
                  <li><a href="#">Menu item 37</a></li>
                  <li><a href="#">Menu item 38</a></li>
                  <li><a href="#">Menu item 39</a></li>
                  <li><a href="#">Menu item 40</a></li>
                  <li><a href="#">Menu item 41</a></li>
                  <li><a href="#">Menu item 42</a></li>
                  <li><a href="#">Menu item 43</a></li>
                  <li><a href="#">Menu item 44</a></li>
                  <li><a href="#">Menu item 45</a></li>
                  <li><a href="#">Menu item 46</a></li>
                  <li><a href="#">Menu item 47</a></li>
                  <li><a href="#">Menu item 48</a></li>
                  <li><a href="#">Menu item 49</a></li>
                  <li><a href="#">Menu item 50</a></li>
                  <li><a href="#">Menu item 51</a></li>
                  <li><a href="#">Menu item 52</a></li>
                  <li><a href="#">Menu item 53</a></li>
                  <li><a href="#">Menu item 54</a></li>
                  <li><a href="#">Menu item 55</a></li>
                  <li><a href="#">Menu item 56</a></li>
                  <li><a href="#">Menu item 57</a></li>
                  <li><a href="#">Menu item 58</a></li>
                  <li><a href="#">Menu item 59</a></li>
                  <li><a href="#">Menu item 60</a></li>
                </ul>
              </li>
              <li><a href="#">Another link</a></li>
              <li><a href="#">One more link</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

 

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






<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../libs/demo-assets/bootstrap/js/bootstrap.min.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap Addon -->
<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>



</body>
</html>
  • Author
    Posts
Viewing 1 post (of 1 total)