Styling of dropdowns/sub links in sub links with dropdowns

Support
#1

We have a kinda nested navigation with a dropdown which contains sub links with another level of sub links.
On desktops the last level gets almost out of the viewport (screenshot 1) and on mobile the sub indicator is not well positioned (screenshot 2).

Screenshot 1 - desktop - Inline Navigation element:

Bildschirmfoto 2024-02-13 um 12.19.47
Bildschirmfoto 2024-02-13 um 12.19.472898×1150 287 KB

Screenshot 2 - mobile - Navigation Collapsed element:
Bildschirmfoto 2024-02-13 um 12.19.24
Bildschirmfoto 2024-02-13 um 12.19.242086×1338 195 KB

At the inspector it’s only possible to adjust the settings for (apparently) only the 1st level of dropdowns and the 1st level of sub links.

Is there an “easy” way to solve this within Cornerstone or is it only possible by adding custom CSS?

Sorry for blurring the content and text, but it’s confidential at the moment, but I hope you get what I mean :slight_smile:

best regards
Mirco

#2

I just figured out, that a layered navigation element may be more useful for the mobile navigation. So this problem I can mark as “solved” :slight_smile:

#3

Hi @mircotripoczky,

Great that it is resolved now.

Thanks

#4

There is still the problem with the inline navigation on desktop viewports :slight_smile:

#5

Hi @mircotripoczky,

Can you please share the website URL for further investigation?

Thanks

#6

It’s the staging entity I’m working on atm… the link you find at the secure note. It’s work in progress. :slight_smile:

#7

Hey @mircotripoczky,

We cannot login to the link URL. Please provide WP access for further investigation. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

#8

Sadly I can’t give away the credentials or create new ones for this work in progress.

At the inspector of the inline navigation element is only one tab to configure/style a dropdown, but not for a second or third level of dropdowns. The “sub” dropdowns always open to the right and if a specific width is set they run out of the viewport at some point. Makes kinda sense because noone wants to have a dropdown jumping around from right to left or vise versa all the time one goes deeper another level.

I’ll think about another solution… except for having the navigation on the left side to give enough room for cascading dropdowns to the right :slight_smile:

best regards
Mirco

#9

Hi Mirco,

I have checked your website and didn’t find any problems with the navigation. I would suggest you use different navigation elements for different viewports. Like, use Navigation Inline for desktop and Navigation Layered or Navigation Modal for smaller screens.

Hope it helps.
Thanks

#10

Yesterday I change the max dropdown level to two. So the third dropdown is gone now.

Maybe it’s a feature request to be able to style sub-dropdowns e.g. telling them where to open (left or right) from their parent. Not sure if that makes sense, or if one should just keep the nesting as small as possible :slight_smile:

#11

Hey @mircotripoczky,

Your feedback has been noted and added to our feature request tracker.

Thanks.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.