Start a new discussion
To start a new discussion please visit the discussions section of the GitHub home page of the project.
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.
Reply To: Combine Vertical and Horizontal
Home › Forums › Older releases › 0.9.x › Combine Vertical and Horizontal › Reply To: Combine Vertical and Horizontal
April 16, 2015 at 08:56
#2381
mfandelParticipant
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>