mfandel

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • 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>
Viewing 1 post (of 1 total)

Register

You will be emailed a link to set your password.

Login

Lost password?