Sub-menu items not aligned and dont look right

My website www.panalytica.com the sub-menus are not aligned and how do I fix the colors on them ?

Is there a recommended code-snipped for adding the social icons?

Thanks

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .menuStyle6 .site-header .main-navigation ul ul.sub-menu li + li {
      margin-left: 0 !important;  
    }

Try to use the Menu Icons plugin. Then add this custom CSS code to hide the menu icon name:

    .menu-item  i._mi + span{
        display: none;
    }

To enlarge the icon size, apply the following CSS code:

    .menu-item  i._mi{
        font-size: 30px;
    }

Regards,
Kharis

Why is the menu have spaces and the menu items so small compared to the other menu options?

I added the CSS but the social icons are not showing. Where would I configure the social icons anyhow?

Try adding this CSS code:

@media only screen and (min-width: 1200px) {
  .menuStyle6 .site-header .main-navigation ul ul.sub-menu li {
    float: left;
    font-size: 18px;
  }
}

Have you inserted additional menu items used for social profiles?

Regards,
Kharis