On the main header menu, the sub-items are not coming in a line

I have setup the main header with 7 items, however the sub-items in the menu are coming in two lines, I want them in one single line, how to do that, please help.

Hey there,

I hope you are well today and thank you for your question.

Kindly send a screenshot of your menu structure along with a link to your website so we can look into this.
I tested 7 submenu links and it displays in one column.

Best regards,
Support.

I am talking about the menu items on the website, not in the panel. I shared the screen shot in my earlier thread, doing it again.
http://www.ombrahmatech.com/

Hey there,

Thank you for the clarification,

This happens because the submenu width is set to 200px, you can increase this with the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*incrase sub menu width*/
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu {
    width: 228px;
}

Best regards,
Support.

Thanks for your reply, I posted what you send in CSS, however if you see the site again, then the first sub-tem is coming to one line, but there one more sub-item to this one, that is coming in two lines, can you help ?

For example :
Services
Agile Development Methodology
MVP Design and Development (is not coming in one line)

thanks.

Hello there,

Please try using the following CSS to increse the sub menu width:

/*Increase sub menu width*/
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu {
    width: 250px;
}

Best Regards,
Support

Thank you for your reply. I did what you sent me and its coming in one line, however when I mouseover the first sub-menu, and the next displays, the earlier sub-menu is hidden behind the second sub-menu and cannot be readable.

If its confusing to understand, I have attached a screenshot, please check.

In the picture, the “Agile Development Methodology” is not visible completely.

Hey there,

Here’s some more code that you’ll need.

/*move sub sub menu left*/
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu {
    left: 220px;
}

Best Regards,
Support