custom shape for main navigation dropdown item

1 reply · opened Sep 23, 2020

JjazzyflashSep 23, 2020

I'd like to create a custom shape for a navigation dropdown menu item. I'd like the dropdown shape to be a rectangular shape with a -27 degree transform skew on each end(east/west) of the rectangle. I was hoping that you can point me where I can find the lines of style code and (in which) css where I can make this adjustment. The site is not online until I finish styling so I can't send a URL

Re: the styling code that I've placed below is a example of the shape styling that displays a custom shape ... the Background-color is not set, I included it because I'd also like to be able to change the custom shape color.

border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
transform: skew(-27deg);
display: block;
content: "";
background-color: rgb(240, 140, 60);

Thanks for your help and support, I look forward to hearing your thoughts

~jeff

SSemicolon WebSTAFFSep 24, 2020

Hello,

This is the CSS Code used for the Sub Menu Containers:
[ch_pre type="css"]@media (min-width: 992px) {

.sub-menu-container {
	position: absolute;
	visibility: hidden;
	width: 220px;
	background-color: #FFF;
	box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
	border: 1px solid #EEE;
	border-top: 2px solid #1ABC9C;
	z-index: 399;
	top: 100%;
	left: 0;
	padding: 0;
}

}[/ch_pre]

You can consider applying your Custom CSS Codes on this. However, as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy, you will need to manually code this to make further customizations.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
custom shape for main navigation dropdown item · Canvas Template Support