drop down menu

Firstly, in order to make changes to your theme it is best practise to either create a child theme or install a custom CSS plugin.

In your child theme’s style.css file or in your custom CSS plugin’s editor, insert the following CSS snippet:

#primary-nav > li:hover > ul {
top: 30px;
}

This will control the gap between the dropdown menu and the main nav bar. Increase or decrease the numeric px value of top as you wish.

Hope this helps, let me know if anything needs clarifying.

It works but it’s not what I want, I want to control the horizontal space between the other down.

Oh, sorry. Did you mean the second and third level dropdown menus? If so, the following CSS controls the horizontal space for these:

#primary-nav li ul li:hover > ul{
left: 152px;
}

Adjust the value for left as you wish.

I noticed there’s a bit of a problem with overlap with your third level dropdown menu. This is a little bit hacky, but you could try the following CSS to fix this:

#primary-nav li ul li:hover > ul {
left: 108%;
}

Thank you.

This really is what I wanted, you can close the topic.