Adding arrows to the main menu

Try this for the dropdowns:

.sf-dropdown > a:after, .sf-dropdown-submenu > a:after {
	 content: "\f0d7";
	 font-family: 'FontAwesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	float: left;
	display: block;
	width: 10px;
	padding-left: 5px;
	}
.sf-menu > .sf-dropdown > a:after{
	content: "\f0d9";
	margin-right: -5px;
}

It seems to add large arrows to the left on the main menu, and additional smaller down arrows on the sub menus.

I want small down arrows on the main menu items, and small left arrows on all sub menus’ items that have drop downs of themselves.

This is what it looks like now:
https://omccomputers.co.nf/

Thank you

Ok remove al the code you have and add this:

.sf-dropdown > a:after, .sf-dropdown-submenu > a:after {
content: "\f0d9";
font-family: 'FontAwesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
float: left;
display: block;
width: 10px;
font-size: 14px;
padding-left: 5px;
}
.sf-menu > .sf-dropdown > a:after {
content: "\f0d7";
margin-right: 5px;
}

The down arrows on main menu items look good now in color and size.

The first level of submenu items, have their font look small and black (guess thats because of removing the rest of the CSS).
They are aligned to the left instead of right and thus the arrows are too close.

The second level of submenu items that have drop down menus of themselves, don’t show arrows at all, and also have their fonts black, small and out of alignment.

https://omccomputers.co.nf/

Thank you

ok by remove the code you have I meant the code for the arrows not the other stuff for alignment. We are specifically talking about the arrows.

It looks much better.

However, on the drop down menu of the first top item, the left arrow of the second submenu item goes one row below the text.

Also second level of submenu items that have their own drop down menus, still don’t show the left arrows.

https://omccomputers.co.nf/

Thank you

Hey,
1. I see that your titles are two rows for one item so the icon would float to the bottom by default. I don’t understand that as a problem. It looks natural because you have two lines for the menu?

2. Ok one more change, don’t add this replace your arrow css with this:

.sf-dropdown > a:after, .sf-dropdown-submenu > a:after, .sf-dropdown-submenu a.sf-with-ul a.sf-with-ul:after  {
content: "\f0d9";
font-family: 'FontAwesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
float: left;
display: block;
width: 10px;
font-size: 14px;
padding-left: 5px;
}
.sf-menu > .sf-dropdown > a:after {
content: "\f0d7";
margin-right: 5px;
}

Hi,

That item now appears in one row, and yet the arrow goes below it.

IT it just important for me to have all the arrows appear in the same line after the text.

I replaced with this code and still the second level of submenu
items that have their own drop down menu don’t show arrows.

If you hover on the first top menu item to the right-> then the 2nd from the top-> then the 4th from the top- it has a drop down item with no arrows.

https://omccomputers.co.nf/

Thank you

Hi,

Please get back to me as soon as you can.

Thank you:)

“That item now appears in one row, and yet the arrow goes below it”
I don’t see this, A lot of your menus are two lines. can you post a link to a screen shot of what you are talking about.

I looked in the header of your site and you don’t have the recent css I posted. Your missing the first line.

Kadence Themes

Hi,

This is what I have in the custom css:
[IMG]https://i60.tinypic.com/v6i7o7.jpg[/IMG]

And that is the problem with second sublevel menu items
that don’t show an arrow although they have a drop down as well:
[IMG]https://i62.tinypic.com/2zevww2.png[/IMG]

Thanks

* This is all the code I have in the custom CSS:

.sf-dropdown > a:after, .sf-dropdown-submenu > a:after {
content: "\f0d9";
font-family: 'FontAwesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
float: left;
display: block;
width: 10px;
font-size: 14px;
padding-left: 5px;
}
.sf-menu > .sf-dropdown > a:after {
content: "\f0d7";
margin-right: 5px;
}

.home-iconmenu a {
height: 180px;
}

.sf-menu > ul li {
text-align: center;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul, .sf-menu ul  {
right:0;
left:auto;
}
.sf-menu ul li a {
font-size: 1.5em !important;
color: #006EAE !important;
text-align: right !important;
}
.sf-menu ul li a:hover {
    color: #FD8204 !important;
    }    

.home-iconmenu a {
background: #006EAE;
}

.captiontitle, .captiontext {
background: #006EAE;
}

.flex-caption {
color: #ffffff;
}

.sf-menu > ul li {
text-align: center;
}

.home-iconmenu h4 {
font-size:32px;
}

.home-iconmenu p {
font-size:18px;
}

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
right: 100%;
top:0;
left:auto;
}

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
right: 100%;
top:0;
left:auto;
}

Ok what you pasted is wrong, that is my point.. look at the first line and then look at what I posted above or below:

.sf-dropdown > a:after, .sf-dropdown-submenu > a:after, .sf-dropdown-submenu a.sf-with-ul a.sf-with-ul:after  {
content: "\f0d9";
font-family: 'FontAwesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
float: left;
display: block;
width: 10px;
font-size: 14px;
padding-left: 5px;
}
.sf-menu > .sf-dropdown > a:after {
content: "\f0d7";
margin-right: 5px;
}