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
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!