Dropdown menu items

[Jennine]

Hello,

I want to configure a dropdown menu in the navbar where the dropdown appears upon clicking, rather than hovering. Specifically, the “About Us” section should have a dropdown displaying two submenu items. Additionally, I want the top menu item, serving as the actual link in the bar, to be selectable with a highlight indication.

However, I’m facing an issue – when I place subpages under a menu item, clicking that item redirects to the page instead of displaying the dropdown. Although hovering briefly shows the dropdown, clicking on “About Us” navigates to that page. Please refer to the “About Us” section in this navbar: https://www.snpnyc.org/test-page/

I desire the functionality to be similar to these dropdowns: https://www.bronxda.nyc.gov/html/home/home.shtml

Please provide guidance. Thank you.

[ruenel]

Hello @Jennine,

Thanks for writing in! In the previous version, there was a “Submenu Trigger” option to choose from which should be clickable, the Anchor to Indicator like the one in the screenshot below (it is from a different Navigation element by the way).

I believe that the feature has been missing. It might be removed on purpose or there is a bug in the latest release. I will clarify this with our developers.

Please bear with us.

[ruenel]

I already ask Charlie about this for claficiations.

[Jennine]

ok so then can I have the “about us” page be part of the dropdown menu?

[charlie]

Hello,

Yes you can always add the “About Us” as another link to satisfy this navigation.

The controls mentioned earlier are only apart of the “Dropdown” element and Navigation Collapsed element. If you switch the “About Us” to be a dropdown element, instead of the navigation inline element, you could also set this up using the “Subindicator Menu Trigger”. It will be a little manual compared the WordPress menu system.

We will take a look at adding “Sub Indicator” trigger to the navigation inline element as well. It will take some time though. Have a great day.

[Jennine]

can I make it so the"About us" top link is not clickable since I added the page to the dropdown?

Home

[ruenel]

Hello @Jennine,

You can edit your menu and replace the “About Us” with a custom link instead and use # as the link URL so that the About Us will not be clickable.

Best Regards.

[Jennine]

Hi Thank you,
I applied your suggestion, and it resolved the issue. Yet, on mobile, the dropdown arrow isn’t user-friendly since it’s positioned too far to the right. Is there a way to relocate it closer to the “About Us” link?

[prakash_s]

Hello @Jennine,

I would suggest you go to the element —>customize —>element CSS and add this custom CSS code there.

$el.x-anchor .x-anchor-sub-indicator {
    position: absolute;
    left: 7em;
} 

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[Jennine]

Hello, thank you for your suggestion. Regrettably, it didn’t resolve the issue. Please refer to the attached screenshot. Additionally, accessing the dropdown arrow on mobile is quite challenging; I have to click it multiple times for it to respond and drop down.! I will attach my credentials. Thank you

[ruenel]

Hello Jennine,

You may need to add a space between $el and .x-anchor.

When working with custom CSS coding, you will have to explore the class hierarchy and make sure the order is correct.

Cheers.

[Jennine]

Hello, that moved it to the left on mobile but on desktop the caret completely disappears so i had to remove the code…

[ruenel]

Okay, Jannine.
Good to know that.

[Jennine]

The issue remains the same. On mobile, the dropdown arrow isn’t user-friendly since it’s positioned too far to the right. Is there a way to relocate it closer to the “About Us” link? Additionally, accessing the dropdown arrow on mobile is quite challenging; I have to click it multiple times for it to respond and drop down.! I will attach my credentials. Thank you

[Jennine]

hello, I still haven’t heard back on what to do. Kindly request your guidance. Thank you

The previous post"The issue remains the same. On mobile, the dropdown arrow isn’t user-friendly since it’s positioned too far to the right. Is there a way to relocate it closer to the “About Us” link? Additionally, accessing the dropdown arrow on mobile is quite challenging; I have to click it multiple times for it to respond and drop down.! I will attach my credentials. Thank you"

[ruenel]

Hello @Jennine,

In the meantime, while we are waiting for a fix or this specific feature, you can use this custom inline element CSS:

$el.x-anchor .x-anchor-content {
    justify-content: flex-start;
}

$el.x-anchor .x-anchor-text {
    margin-right: 0.75em;
}

Kindly let us know how it goes.

[Jennine]

What am i doing wrong?

[ruenel]

Hey @Jennine,

Sorry, there should be a space before the .. Check your custom header now.

Thanks.