Reply To: Combine Vertical and Horizontal

[admin]

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!