Drop-Down Menu Arrows (DOWN)

Hello, valued team. I am creating a site with two drop-downs in the main menu.

On the mobile menu I see wonderful arrows (DOWN) next to the pages/links that have drop-downs (sub-pages.)


Unfortunately on the computer screen rendering the Main Menu - Top Level does NOT have DOWN arrows (to indicate that there are subpages.)

Also, the Main Menu in the Footer Widget has nothing to identify that some of the Site Pages are Sub Pages. There is just awkward spacing between the Top Level Button and the first Sub Page. : /

You can observe this in the last picture uploaded as well as the lack of DOWN arrows next to the Header Main Menu.

In the Mobile Footer the same thing happens with the Site Pages – no indication of Sub Pages, just awkward spacing:

How can I add the down arrows to the Main Menu? For pages/links that have Sub Pages?

(Also, I want to center the computer screen Drop Downs in the Main Menu. I did find the code for this from another post/request. BUT, I haven’t installed that code yet incase that adjustment should be accomplished in the same code for this customization. AND, there are NO controls for the Mobile Menu Drop Down colors. I have code for the Mobile Menu drop down colors, but it seems to not effect the Sub Pages. I can address that separately if better, but wanted to mention here incase all of this should be accomplished in the same line/section of CSS.

Thank you much for the help. Sorry to be high maintenance, but I am trying to compete and be as good as possible.


My staging site is:

Hi there,

please try this CSS code below:

@media (min-width: 1200px){
  #mainnav .menu-item-has-children:after {
    content: "\f107";
    font-family: "FontAwesome";
    color: aqua;
    position: absolute;
    right: 0px;
    top: -2px;
  #mainnav .menu-item-has-children:hover:after {
    color: #84c200;

Then you can add a space to the submenu in the footer menu using this code:

.footer-widgets li.menu-item-has-children ul {
    padding-left: 15px;

You can add the code above to Customize > additional CSS.

Both lines of code work perfectly, Awan! Thank you very much. I will add to my arsenal of code.

I still feel that these requests to modify I am making should be builtin features in the theme itself and not need additional CSS code. But what do I know? It is a beautiful theme nevertheless.

Thank you!