css for one-page website menu

Hi Katia,

Can you link us to your site?

Hi Ying,

the website is currently under construction but here's a private link

Thank you again

That's tricky, it will require custom JavaScript which is out of the scope of the support forum.

Although there's a workaround you can give it a try:

1. Add a sub menu to your menu items, you can enter a space in the navigation label field.
https://www.screencast.com/t/sGs2ml3oIN

2. Go to customizer > layout > primary navigation, set Navigation Dropdown toclick-menu item.

3. Add this CSS to customize > additional CSS:

span.dropdown-menu-toggle {
    display: none !important;
}
.main-navigation .main-nav>ul > li > ul.sub-menu {
    display: none !important;
}
.main-navigation .main-nav > ul > li.sfHover a {
    border-top: 2px solid #EB5757;
}

Thank you, Ying, but the trick you suggested seems not working :(

You are right, it doesn't work.

In that case, you might need to look for a plugin or custom development, unfortunately.

Thank you again for your support, Ying!
Best regards :)

No problem :)
Hope you can find a good solution!