This is what I have versus what I am trying to achieve. Can you help?

<link removed>

Hello Charles Southgate

Thanks for contacting with us. You can follow Pavel's instruction. And @Pavel thanks for the details explanation.

-Regards

It works! Thank you Pavel.

If anyone is reading this looking to do the same thing and wondering how to get the CSS to look like the rest of the drop down menu, you need to change the style="none" to style="html5" in the extra line in the menu.php.

Then you need to go to the module and add " nav" as a menu class suffix under the Advanced tab.

You are wellcome

you need to change the style="none" to style="html5" in the extra line

It is default, so it is better not to change in the extra line. It can also be selected in the module settings.

Thank you again, Pavel.

I have changed it back to none as you suggest.

I am trying to work out now how to make the drop down box wider and get it all into a column rather tha flex-wrap. Any suggestions?

For example, a similar CSS code

.sp-profile-dropdown {
    width: 300px;
}
.sp-profile-dropdown .menu.nav {
    display: flex;
    flex-direction: column;
}

Or like this (instead flex properties), that there is less code

.sp-profile-dropdown .menu.nav {
    display: grid;
}