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.

Reply To: Combine Vertical and Horizontal

Home › Forums › Older releases › 0.9.x › Combine Vertical and Horizontal › Reply To: Combine Vertical and Horizontal

April 20, 2015 at 12:24 #2390
admin
Keymaster

Hi,

There is no “official” documented way of doing this so if what you’ve done works for you, you should be good to go with it. To fix the sub arrows issue, you could use additionally something like:

.subnav1 >li > a { position: relative; }
.subnav1 > li > a > .sub-arrow {
      margin-top: 8px;
      border-top: 4px solid;
      border-bottom: 4px dashed transparent;
      border-left: 4px dashed transparent;
}

Apart from that it’s a good idea to wrap your rules for the horizontal sub menu in a media query to prevent breaking the Bootstrap’s collapsible styles – i.e. something like:

@media (min-width:768px) {
	.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 > a {position: relative;}
  	.subnav1 >li > a > .sub-arrow {
      margin-top:8px;
      border-top:4px solid;
      border-bottom:4px dashed transparent;
      border-left:4px dashed transparent;
	}
 	.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;}
 }

Cheers!