Reply To: Combine Vertical and Horizontal

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

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

Register

You will be emailed a link to set your password.

Login

Lost password?