Speech Bubble Menu


May I know if it is possible to make speech bubble menu like the picture attached.speechbubble

If so, could you help with the CSS code? Thank you so much!

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

ul.sub-menu li:first-child {
  border-radius: 5px 5px 0 0;

ul.sub-menu li:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border: 10px solid transparent;
  border-bottom-color: #f7f7f7;
  border-top: 0;
  margin-left: -10px;
  margin-top: -10px;

ul.sub-menu li:last-child {
  border-radius: 0 0 5px 5px;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Than you Roman! This is very helpful. I tried but it seems like it is not aligned. I have used the css code below to reduce space between logo and menu but it seems to cause the speech bubble to be misaligned.

@media (min-width: 1200px) {
    .site-branding.col-md-4.col-sm-6.col-9 {
        max-width: 22%;

    #site-navigation.main-navigation.col-md-8 {
        max-width: 78%;
        flex-basis: auto;
  1. How to align the speech bubble to be center?
  2. How can I format the sub menu (position center, remove border line and capitalization) Should look exactly like this below.


Hello, you are welcome!

It looks like these issues require some coding and testing, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork. Hope for your understanding.

Kind Regards, Roman.

Thank you Roman! I managed to sort it out.

May I know how can I remove the divider in the sub menu and also change the font size?


May I know how can I remove the divider in the sub menu and also change the font size?

Please create a separate topic for each of those issues to keep the forum in good order and make it easier to help you. I’ll close this topic to avoid confusion.

Kind Regards, Roman.
aThemes Support