Home>Support>Second Level Menu (Submenu) first element triangle on top

Second Level Menu (Submenu) first element triangle on top

By Jose AMezcua, 9 years ago. Last reply by Daniel, 9 years ago.

Hello Site Origin Team,

I have been looking around the support threads and could not find anything related to this, I hope it can be done using just CSS.

I would like to have an arrow/triangle at the top of the first element of the submenu pointing to its parent. Just like this: http://mylo.com.mx/wp-content/uploads/2015/02/Screen-Shot-2015-02-22-at-9.58.36-PM.png

Thanks in advance!
J.

URL: http://mylo.com.mx

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago Daniel
    Hi, I Work Here

    Hi Jose,

    First of all I apologize for the delayed response. Try placing the following css in the custom css section

    li#menu-item-96:after, li#menu-item-96:before {
	bottom: 100%!important;
	left: 30%!important;	
	border: solid transparent!important;
	content: " "!important;
	height: 0!important;
	width: 0!important;
	position: absolute!important;
	pointer-events: none!important;
}


li#menu-item-96:before {
	border-bottom-color: #F15A24!important;
	border-width: 8px!important;
	margin-left: -36px!important;
}


li#menu-item-56:after, li#menu-item-56:before {
	bottom: 100%!important;
	left: 30%!important;	
	border: solid transparent!important;
	content: " "!important;
	height: 0!important;
	width: 0!important;
	position: absolute!important;
	pointer-events: none!important;
}


li#menu-item-56:before {
	border-bottom-color: #F15A24!important;
	border-width: 8px!important;
	margin-left: -36px!important;
}


li#menu-item-59:after, li#menu-item-59:before {
	bottom: 100%!important;
	left: 30%!important;	
	border: solid transparent!important;
	content: " "!important;
	height: 0!important;
	width: 0!important;
	position: absolute!important;
	pointer-events: none!important;
}


li#menu-item-59:before {
	border-bottom-color: #F15A24!important;
	border-width: 8px!important;
	margin-left: -36px!important;
}




li#menu-item-61:after, li#menu-item-61:before {
	bottom: 100%!important;
	left: 30%!important;	
	border: solid transparent!important;
	content: " "!important;
	height: 0!important;
	width: 0!important;
	position: absolute!important;
	pointer-events: none!important;
}


li#menu-item-61:before {
	border-bottom-color: #F15A24!important;
	border-width: 8px!important;
	margin-left: -36px!important;
}

    Try that out

    Cheers

  2. 9 years, 7 months ago Jose AMezcua

    Hello Addo,

    don’t worry about the timing, it works like magic! Awesome.

    Thanks for the help and have a great day!
    J

  3. 9 years, 7 months ago Daniel
    Hi, I Work Here

    You are welcome Jose!

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More