Menu Dropdown Arrow Does Not Appear Immediately After Menu Item

[lgiannola_ENC]

Hi. On our main menu (https://www.suntiva.com/) we have submenus. For existing menu items such as About>Our Team> and also Solutions & Services>Workforce Transformation you will notice that the arrow icons after “Our Team” and “Workforce Transformation” appear immediately after (to the right of) the menu item.

However, in a new menu item we have (Customers>Civilian) the arrow appears on the left, on the line below. No matter what we do, we cannot get the Customers>Civilian menu arrows to appear like the previous examples. We have used the same formatting, reset the menus, etc, and they won’t work like the first two examples.

Not sure if this is a bug or something so we would appreciate you looking at this. Thank you.

CORRECT:

WRONG:

[marc_a]

Hi David,

Thanks for reaching out!

The reason why the dropdown menu arrow will go to the next line because of the improper adding label in the menu. As a can see on your menu, you added this as a label to make center <div style="text-align: center;">Civilian</div> and the div tag forcing the arrow to go to the next line. To fix your issue, first, you need to remove the div HTML tag. Instead of <div style="text-align: center;">Civilian</div> just add the normal text Civilian then add the CCS code below in your X > Theme Options > CSS to make it center.

.masthead .menu-item-has-children {
  text-align: center;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[lgiannola_ENC]

Thank you! That worked perfectly. We inherited this website from another developer and that code inside the menu items was a bit puzzling to us.

[alexander]

You’re most welcome! Glad to hear it’s working now.